isValidElementは、値がReact要素かどうかを確認します。

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: 確認したいvalue。任意の型の値を指定できます。

戻り値

isValidElementは、valueがReact要素であればtrueを返します。そうでない場合は、falseを返します。

注意点

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

使用方法 （SVGアイコン）

React要素かどうかを確認する （SVGアイコン）

値がReact要素かどうかを確認するには、isValidElementを呼び出します。

React要素とは

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ノード （SVGアイコン）

コンポーネントを作成する場合、あらゆる種類の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を使用しないでください。

（SVGアイコン）
前へforwardRef
（SVGアイコン）
次へPureComponent