isValidElement は値が React 要素 (React element) であるかどうかを判定します。

const isElement = isValidElement(value)

リファレンス

isValidElement(value)

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

import { isValidElement, createElement } from 'react';

// ✅ React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

さらに例を見る

引数

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

返り値

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

注意点

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

使用法

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

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

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

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

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

import { isValidElement, createElement } from 'react';

// ✅ JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

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

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

// ❌ These are *not* React elements
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

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

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

さらに深く知る

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

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

function MyComponent() {
  // ... you can return any React node ...
}

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

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

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

function MyComponent() {
  return 42; // It's ok to return a number from component
}

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

PreviousforwardRef
NextPureComponent