reactjs 从组件返回的字符串不是有效的jsx元素

mdfafbf1  于 2023-03-29  发布在  React
关注(0)|答案(2)|浏览(244)

我是用react写typescript的新手,我遇到的第一个错误是当我从组件返回一个字符串时,我不认为这是无效的,因为react知道如何处理它:

function MyComponent(){
  const Test = ()=> "Hello" 
  return <Test />
}

Typescript抱怨:
“Test”不能用作JSX组件。其返回类型“string”不是有效的JSX元素。
你可能会说,把它 Package 在一个React片段中。
虽然将其 Package 在React片段中可以工作,但它并不总是很酷,以下面的例子为例:

import type { PropsWithChildren } from 'react'

interface P extends PropsWithChildren {}

function MyComponent() {
  const Button = (props: P) => {
    const { children } = props
    return children
  }
  return <Button>Hello world</Button>
}

Typescript抱怨:
“Button”不能用作JSX组件。其返回类型“ReactNode”不是有效的JSX元素。类型“undefined”不能分配给类型“Element|零'
为了解决这个问题,我不得不写:

return (
  <Button>
    <React.Fragment>
      Hello world
    </React.Fragment>
  </Button>
)

有没有办法让这个错误不妨碍我?

lhcgjxsq

lhcgjxsq1#

Typescript无法将Test识别为组件,因为类型没有显式定义。要将常规函数与React组件区分开来,您可以分配一个组件类型(如React.FC)或为其分配一个返回类型React.ReactNode

acruukt9

acruukt92#

如果你试图使用React和TypeScript返回和表示一个组件,你需要返回一个JSX组件(你已经验证过了,用一个片段 Package 它)。
您可以在answer中查看更多详细信息。

相关问题