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: 你想要检查的值。它可以是任何类型的值。

返回值

isValidElement 如果 value 是一个 React 元素，则返回 true。否则，它返回 false。

注意事项

  • 只有 JSX 标签 和由 createElement 返回的对象被认为是 React 元素。 例如，即使像 42 这样的数字是一个有效的 React 节点（并且可以从组件返回），它也不是一个有效的 React 元素。使用 createPortal 创建的数组和门户也不被认为是 React 元素。

用法

检查某个值是否为React元素

调用 isValidElement 来检查某个值是否为React 元素。

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 节点

编写组件时，可以从中返回任何类型的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 来检查某些内容是否可以渲染。

上一页forwardRef
下一页PureComponent