リファレンス

isValidElement(value)

isValidElement(value) を呼び出して、value が React 要素であるかどうかを判定します。

引数

  • value: 判定対象の値。任意の型の値を指定できます。

返り値

isValidElement は value が React 要素であれば true を返します。それ以外の場合は false を返します。

注意点

  • React 要素と見なされるのは、と、 によって返されるオブジェクトだけです。例えば、42 のような数値は有効な React ノード (node) ではあります（コンポーネントから返すことができるため）が、有効な React 要素ではありません。配列や、 で作成されたポータルも、React 要素とは見なされません。

使用法

値が React 要素かどうかを判定する

isValidElement を呼び出して、ある値が React 要素であるかどうかを判定します。

React 要素とは、以下のようなものです。

  • を書くことによって生成される値
  • を呼び出すことによって生成される値

React 要素に対しては、isValidElement は true を返します。

文字列、数値、または任意のオブジェクトや配列などの他の値は、React 要素ではありません。

それらに対しては、isValidElement は false を返します。

isValidElement が必要となることは非常に稀です。これが主に役立つのは、要素のみを受け入れる他の API（例えば がそうです）を呼び出しており、引数が React 要素でないことによるエラーを避けたい場合です。

isValidElement のチェックを追加するための特段の理由がない限り、おそらくこれは必要ありません。

さらに深く知る

React「要素」と React「ノード」

コンポーネントを書くとき、そこからは任意の React ノード を返すことができます。

React ノードとは、以下のようなものです。

  • <div /> や createElement('div') のようにして作成された React 要素
  • で作成されたポータル
  • 文字列
  • 数値
  • true, false, null, undefined（これらは表示されません）
  • 他の React ノードの配列

isValidElement は引数が React 要素であるかどうかを判定しますが、それが React ノードであるかどうかを判定するわけではありません。例えば、42 は有効な React 要素ではありません。しかし、これは完全に有効な React ノードです。

したがって、何かがレンダーできるかどうかをチェックする方法として、isValidElement を使うべきではありません。