ReactElement、ReactNode以及JSX.Element

interface PreProcessorProps {
  error?: boolean | BooleanFunction
  loading?: boolean | BooleanFunction
  children: React.ReactNode | RenderFunction
const PreProcessor: React.FC<PreProcessorProps> = ({ children }) => {
  // ....
  return children

在使用ts写React时,尴尬的遇到了这个错误

不能将类型“({ error, loading, children }: PropsWithChildren<PreProcessorProps>) => {} | null | undefined”分配给类型“FC<PreProcessorProps>”。
  不能将类型“{} | null | undefined”分配给类型“ReactElement<any, any> | null”。
    不能将类型“undefined”分配给类型“ReactElement<any, any> | null”。

无奈之下,只好看源代码来分析ReactNode和ReactElement的区别。

interface ReactElement<
  P = any,
  T extends string | JSXElementConstructor<any> =
    | string
    | JSXElementConstructor<any>
  type: T
  props: P
  key: Key | null

ReactElement是一个接口,包含type,props,key三个属性值。该类型的变量值只能是两种: nullReactElement实例

    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),可以是stringnumberReactElement{}booleanReactNodeArray。由此可以看出ReactElement类型的变量可以直接赋值给ReactNode类型的变量,但是反过来是不行的。

namespace JSX {
    // ...
    interface Element extends React.ReactElement<any, any> { }
    // ...