Function as property in React.js TypeScript component-CodePudding

What are the differences between this syntax? What types will they have?

eg:

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)} />

CodePudding user response：

When you are trying to set a React Component as a property you should go with ReactElement or ReactNode. These types can be imported by the react component.

Also then only your first definition is valid. (Okay Maybe second and last one too, but that is not what you really want.

Your result:

property: ReactElement

Definition 3 is function that returns a function, so the valid syntax should be:

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

Definition four and five is a simpler for. It directly returns a React Node:

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

It depends how your component should look like :)