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 是 React 元素，则 isValidElement 返回 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 来检查某个内容是否可以渲染。

上一篇createRef
下一篇PureComponent