isValidElement

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

const isElement = isValidElement(value)

リファレンス
- isValidElement(value)
使用法
- 値が React 要素かどうかを判�?�する

リファレンス

`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 を使うべきではありません。

PreviouscreateRef

NextPureComponent