reactjs 这个JSX代码应该是什么类型的-- React.ReactElement、React.ReactNode和React.FunctionComponent都失败了

velaa5lx 于 2023-05-06 发布在 React

关注(0)|答案(2)|浏览(91)

我有一个 prop SubmissionComponent，需要给它分配一个类型。
它期望某种JSX --可能是一个按钮，但也可能是更复杂的结构。
下面是一个示例结构：

const SubmissionComponent = <p>hi</p>;

然后调用

<Submitter 
   SubmissionComponent={SubmissionComponent} />

如果在我Submitter组件中，我像这样定义了SubmissionComponent

SubmissionComponent: React.ReactNode;

我做了一个

<SubmissionComponent/>

然后我在放置组件的位置得到错误消息

JSX element type 'SubmissionComponent' does not have any construct or call signatures.

所以好吧，我把它改成

SubmissionComponent: React.FunctionComponent;

那么我在代码中放置<SubmissionComponent/>的地方不会出现任何错误，但在代码中放置<SubmissionComponent/>的地方会出现错误

<Submitter 
       SubmissionComponent={SubmissionComponent} />

这个错误是

Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.

这意味着如果我尝试的话，类型应该是ReactElement

SubmissionComponent: React.ReactElement;

然后我又得到了错误

JSX element type 'SubmissionComponent' does not have any construct or call signatures.

如果我尝试

SubmissionComponent: React.ReactElement<any, any>;

我也得到同样的错误
React版本17.0.2，typescript 4.6.3

reactjs

来源：https://stackoverflow.com/questions/76161270/what-typescript-type-should-this-jsx-code-be-react-reactelement-react-reactno

2条答案

按热度按时间

dl5txlt91#

SubmissionComponent的类型是JSX.Element，您应该在Submitter组件中使用它，并使用花括号：{SubmissionComponent}。
示例：

function Parent() {
  const SubmissionComponent = <p>hi</p>;

  return <Child SubmissionComponent={SubmissionComponent} />
}

type ChildProps = {
  SubmissionComponent: JSX.Element;
}

function Child(props: ChildProps) {
  const { SubmissionComponent } = props;
  return (
    <>
      {SubmissionComponent}
    </>
  )
}

Playground

赞(0）回复(0）举报 2023-05-06

lf5gs5x22#

const SubmissionComponent = <p>hi</p>; const的类型为“JSX.Element”

const SubmissionComponent = () => (
    <p>hi</p>
);

如果你把它变成一个函数，那么你可以像“FunctionComponent”一样使用它，并把它分配给“React.ReactNode”

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 这个JSX代码应该是什么类型的-- React.ReactElement、React.ReactNode和React.FunctionComponent都失败了

2条答案

相关问题

热门标签

最新问答