判断对象是否是 React 元素

问题

如何判断一个对象是否是 React 元素？

解答

使用 React.isValidElement() 方法可以判断一个对象是否是 React 元素。该方法接收一个参数，返回布尔值。

import React from 'react';

const MyComponent = () => {
  return <div>Hello, world!</div>;
}

const elem = <MyComponent />;

console.log(React.isValidElement(elem)); // true
console.log(React.isValidElement({}));   // false

在上述代码中，elem 是通过 JSX 创建的 React 元素，React.isValidElement() 返回 true；而普通对象 {} 则返回 false。

如果需要获取元素的类型或其他属性，可以直接访问元素的属性，例如 type、props、key 等。

console.log(elem.type);  // MyComponent
console.log(elem.props); // {}

关键点

• React.isValidElement() 用于判断对象是否为 React 元素
• 该方法只能判断是否为 React 元素，不能判断元素类型和属性
• 可以通过 type、props、key 等属性直接访问元素信息