isValidElement

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 возвращает true, если value является элементом React. В противном случае возвращается false.

Ограничения

• В качестве элементов React рассматриваются только JSX-теги и объекты, возвращаемые createElement. Например, даже если число типа 42 является допустимым React узлом (и может быть возвращено из компонента), оно не является допустимым элементом React. Массивы и порталы, созданные с помощью createPortal, также не считаются элементами React.

Использование

Проверка, является ли что-то элементом React

Вызовите isValidElement, чтобы проверить, является ли некоторое значение React-элементом.

React-элементы - это:

• Значения, создаваемые при написании [JSX-тега] (../../learn/writing-markup-with-jsx.md)
• Значения, создаваемые вызовом 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 elements vs React nodes

Когда вы пишете компонент, вы можете вернуть из него любой тип React-узла:

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

Узел React может быть:

• Элемент React, созданный как div или createElement('div').
• Портал, созданный с помощью 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 как способ проверить, можно ли что-то отобразить.

Комментарии