☰

JSX.Element、ReactNode、ReactElement はいつ使用すればよいですか? 質問する

tag-icon • tag-icon javascript reactjs typescript
JSX.Element、ReactNode、ReactElement はいつ使用すればよいですか? 質問する

render現在、React アプリケーションを TypeScript に移行しています。これまでのところ、これはかなりうまく機能していますが、関数、特に関数コンポーネントの戻り値の型に問題があります。

私は常に をJSX.Element戻り値の型として使用してきましたが、コンポーネントが何もレンダリングしないnullことにした場合、つまり が の有効な値ではないためが返された場合、これは機能しnullなくなりましたJSX.Element。これが私の旅の始まりでした。私は Web で検索し、代わりに を使用する必要があることを発見しました。ReactNodeこれには、null発生する可能性のある他のいくつかのことが含まれます。

ただし、関数コンポーネントを作成すると、TypeScript はReactNode型についてエラーを出します。再度検索してみると、関数コンポーネントの場合はReactElement代わりに を使用する必要があることがわかりました。ただし、そうすると互換性の問題はなくなりますが、今度は TypeScript がnull有効な値ではないと再度エラーを出します。

長い話を短くすると、3つの質問があります。

  1. JSX.Element、、ReactNodeおよびの違いは何ですかReactElement?
  2. renderクラス コンポーネントのメソッドは戻るReactNodeのに、関数コンポーネントのメソッドは戻るのはなぜですかReactElement?
  3. に関してこれをどのように解決すればよいでしょうかnull?

ベストアンサー1

JSX.Element、、ReactNodeおよびの違いは何ですかReactElement?

あReactElementtypeは、、、propsおよびkeyプロパティを持つオブジェクトです。

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

あJSX.Elementは です。さまざまなライブラリが独自の方法でReactElement<any, any>実装できるため存在します。JSX

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

あReactPortalReactElementは次のプロパティを持つですchildren:

interface ReactPortal extends ReactElement {
  children: ReactNode;
}

あReactNodeはReactElement、、、、、、、、または:string​​​​​numberIterable<ReactNode>ReactPortalbooleannullundefined

type ReactNode =
  | ReactElement
  | string
  | number
  | Iterable<ReactNode>
  | ReactPortal
  | boolean
  | null
  | undefined;

例：

<div> // <- ReactElement
  <Component> // <- ReactElement
    {condition && 'text'} // <- ReactNode
  </Component>
</div>

クラス コンポーネントのレンダリング メソッドは ReactNode を返すのに、関数コンポーネントは ReactElement を返すのはなぜですか?

これは、に起因するものです歴史的な理由。

あComponent.renderを返しますReactNode:

class Component<P, S> {
  // …
  render(): ReactNode;
  // …
}

あFunctionComponentを返しますReactElement<any, any> | null:

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

null に関してこれを解決するにはどうすればよいですか?

React と同じように入力しますReactElement | null。または、TypeScript に型を推測させます。

おすすめ記事