Function 作为 React.js + TypeScript 组件中的属性

Question

这种语法有什么区别？ 他们会有哪些类型？

例如：

const foo = () => (<>Something...</>);  

const bar = (arg: string) => (<>{arg}</>);

interface IComponent {
property: ???
}

<Component property={foo} />
<Component property={foo()} />
<Component property={() => foo} />
<Component property={() => foo()} />
<Component property={() => bar(arg)} />
<Component property={bar(arg)} />

Answer 1

当您尝试将 React 组件设置为属性时，您应该使用ReactElement或ReactNode 。 这些类型可以由react组件导入。

那么只有你的第一个定义是有效的。 （好吧，也许第二个也是最后一个，但这不是你真正想要的。

你的结果：

property: ReactElement

定义 3 是 function，它返回一个 function，所以有效的语法应该是：

property: () => () => ReactElement<{args: string}>

定义四和五是比较简单的。 它直接返回一个 React 节点：

property: () => ReactElement或
property: () => ReactElement<{args: string}>

这取决于您的组件的外观：)