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

查看更多示例。

参数

🌐 Parameters

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

返回

🌐 Returns

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

注意事项

🌐 Caveats

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

用法

🌐 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 标签 产生的值
• 通过调用 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
}