JSX.Element vs ReactNode vs ReactElement 区别

285 阅读1分钟

ReactElement

ReactElement是具有类型和属性的对象。

 type Key = string | number

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

ReactNode

ReactNode可以是 a ReactElement, a ReactFragment, a string, a numberor an arrayof ReactNodes, or null, or undefined, or a boolean

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

JSX.Element

JSX.Element是一个ReactElement,道具和类型的通用类型是任意的。它存在,因为各种库可以以自己的方式实现 JSX,因此 JSX 是一个全局命名空间,然后由库设置,React 是这样设置的:

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

举例

<p> // <- ReactElement = JSX.Element
   <Custom> // <- ReactElement = JSX.Element
     {true && "test"} // <- ReactNode
  </Custom>
 </p>