我有一个 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
2条答案
按热度按时间dl5txlt91#
SubmissionComponent
的类型是JSX.Element
,您应该在Submitter
组件中使用它,并使用花括号:{SubmissionComponent}
。示例:
Playground
lf5gs5x22#
const SubmissionComponent = <p>hi</p>;
const的类型为“JSX.Element”如果你把它变成一个函数,那么你可以像“FunctionComponent”一样使用它,并把它分配给“React.ReactNode”