isValidElement

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: Значение value, которое требуется проверить. Оно может быть любого типа.

Возвращаемое значение

isValidElement возвращает true, если value является элементом React. В противном случае возвращает false.

Ограничения

• Только теги JSX и объекты, возвращаемые createElement, считаются элементами React. Например, даже число, такое как 42, является допустимым узлом React (и может возвращаться из компонента), но не является допустимым элементом 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, скорее всего, она вам не нужна.

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

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