四时宝库

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三个属性值。该类型的变量值只能是两种： 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

作者：请叫我Pro大叔
链接：https://www.jianshu.com/p/95ce2266450a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。