isValidElement

const isElement = isValidElement(value)

• 参考
  • isValidElement(value)
• 用法
  • 检查某个元素是否为 React 元素

参考

¥Reference

isValidElement(value)

调用 isValidElement(value) 来检查 value 是否为 React 元素。

¥Call isValidElement(value) to check whether value is a React element.

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

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

• value：你要检查的 value。它可以是任何类型的值。

  ¥value: The value you want to check. It can be any a value of any type.

返回

¥Returns

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

¥isValidElement returns true if the value is a React element. Otherwise, it returns false.

注意事项

¥Caveats

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

  ¥Only JSX tags and objects returned by createElement are considered to be React elements. For example, even though a number like 42 is a valid React node (and can be returned from a component), it is not a valid React element. Arrays and portals created with createPortal are also not considered to be React elements.

用法

¥Usage

检查某个元素是否为 React 元素

¥Checking if something is a React element

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

¥Call isValidElement to check if some value is a React element.

React 元素包括：

¥React elements are:

• 编写 JSX 标签 生成的值

  ¥Values produced by writing a JSX tag

• 调用 createElement 生成的值

  ¥Values produced by calling createElement

对于 React 元素，isValidElement 返回 true：

¥For React elements, isValidElement returns 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 元素。

¥Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.

对于它们来说，isValidElement 返回 false：

¥For them, isValidElement returns 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 元素时出现错误，那么它非常有用。

¥It is very uncommon to need isValidElement. It’s mostly useful if you’re calling another API that only accepts elements (like cloneElement does) and you want to avoid an error when your argument is not a React element.

除非你有非常特殊的原因需要添加 isValidElement 检查，否则你可能不需要它。

¥Unless you have some very specific reason to add an isValidElement check, you probably don’t need it.

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

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