ReactElement、ReactNode以及JSX.Element
interface PreProcessorProps {
error?: boolean | BooleanFunction
loading?: boolean | BooleanFunction
children: React.ReactNode | RenderFunction
}
}
const PreProcessor: React.FC = ({ children }) => {
// …
return children
}
在使用ts写React时,尴尬的遇到了这个错误
不能将类型“({ error, loading, children }: PropsWithChildren) => {} | null | undefined”分配给类型“FC”。
不能将类型“{} | null | undefined”分配给类型“ReactElement<any, any> | null”。
不能将类型“undefined”分配给类型“ReactElement<any, any> | null”。
无奈之下,只好看源代码来分析ReactNode和ReactElement的区别。
interface ReactElement<
P = any,
T extends string | JSXElementConstructor =
| string
| JSXElementConstructor
{
type: T
props: P
key: Key | null
}
ReactElement是一个接口,包含type,props,key三个属性值。该类型的变量值只能是两种: null 和 ReactElement实例
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
ReactNode是一种联合类型(Union Types),可以是string、number、ReactElement、{}、boolean、ReactNodeArray。由此可以看出ReactElement类型的变量可以直接赋值给ReactNode类型的变量,但是反过来是不行的。
namespace JSX {
// …
interface Element extends React.ReactElement<any, any> { }
// …
}
JSX.Element是ReactElement的子类型,并且没有增加属性,二者是兼容的。也就是说JSX.Element类型的变量可以赋值给ReactElement类型的变量,反过来赋值也成立。
综合上面所述:
JSX.Element ≈ ReactElement ⊂ ReactNode