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

Дивіться більше прикладів нижче.

Параметри

  • значення: значення, яке ви хочете перевірити. Це може бути значення будь-якого типу.

Повернення

isValidElement повертає true, якщо value є елементом React. В іншому випадку повертається false.

Застереження

  • Тільки JSX-теги та об'єкти, повернуті createElement вважаються елементами React. Наприклад, навіть якщо число на кшталт 42 є дійсним React-вузлом (і може бути повернуте з компонента), воно не є дійсним React-елементом. Масиви та портали, створені за допомогою createPortal, також не вважаються елементами React.

Використання

Перевірка, чи є щось елементом React

.

Виклик isValidElement для перевірки, чи є деяке значення елементом React.

Елементи React - це:

  • Значення, отримані шляхом написання JSX-тегу
  • Значення, отримані за допомогою виклику createElement

Для React-елементів isValidElement повертає істину:

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 може бути:

  • Елемент 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 як спосіб перевірити, чи можна щось відрендерити.