Skip to content

怎么在代码中判断一个 React 组件是 class component 还是 function component?

Posted on:2024年7月23日 at 09:49

可以使用JavaScript的typeof运算符和React的Component类来进行判断。

下面是一个示例的判断方法:

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

上面定义了一个名为isClassComponent的函数,它接受一个组件作为参数。函数内部使用typeof运算符来判断该组件是否为函数类型,并通过检查component.prototype.isReactComponent属性来确定是否为Class组件。

原文转自:https://fe.ecool.fun/topic/02cde100-0c41-4036-b224-31895cd8c339