判断 React 组件类型

问题

如何在代码中判断一个 React 组件是 class component 还是 function component？

解答

可以通过检查组件原型上的 isReactComponent 属性来判断。React 的 class component 继承自 React.Component，其原型上会有 isReactComponent 标记。

function isClassComponent(component) {
  return (
    typeof component === 'function' &&
    !!component.prototype.isReactComponent
  );
}

// 示例用法
const MyComponent = () => <div>Hello, I'm a function component!</div>;

const MyClassComponent = class extends React.Component {
  render() {
    return <div>Hello, I'm a class component!</div>;
  }
};

console.log(isClassComponent(MyComponent)); // false
console.log(isClassComponent(MyClassComponent)); // true

关键点

• 首先判断组件是否为函数类型（class 本质也是函数）
• class component 的原型上有 isReactComponent 属性，这是 React.Component 的标记
• function component 没有 prototype.isReactComponent 属性
• 使用 !! 将结果转换为布尔值