isValidElement¶

isValidElement проверяет, является ли значение элементом React.

1

const isElement = isValidElement(value);

Описание¶

isValidElement(value)¶

Вызовите isValidElement(value), чтобы проверить, является ли value элементом React.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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:

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7

// ❌ 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, она вам, вероятно, не нужна.

1
2
3

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

1
2
3

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

Комментарии