我有从React.Component
继承的功能/无状态组件和组件:
const Component1 = () => (<span>Hello</span>)
class Component2 extends React.Component {
render() {
return (<span>Hello</span>)
}
}
如何判断组件是否为无状态?有官方的方法吗?
isStateless(Component1) // true
isStateless(Component2) // false
答案 0 :(得分:13)
你可以查看它的原型,例如:
function isStateless(Component) {
return !Component.prototype.render;
}
答案 1 :(得分:4)
类组件本质上是有状态的,但是随着React钩子的引入,功能组件不再称为无状态的,因为它们也可以是有状态的。
自从React 0.14起, isReactComponent
的特殊属性就存在于React.Component
上。这样可以确定组件是否为类组件。
function isFunctionalComponent(Component) {
return (
typeof Component === 'function' // can be various things
&& !(
Component.prototype // native arrows don't have prototypes
&& Component.prototype.isReactComponent // special property
)
);
}
function isClassComponent(Component) {
return !!(
typeof Component === 'function'
&& Component.prototype
&& Component.prototype.isReactComponent
);
}
类似的检查在React代码库中执行。
由于组件可以是各种事物,例如上下文Provider
或Consumer
,因此isFunctionalComponent(Component)
可能不等于!isClassComponent(Component)
。
答案 2 :(得分:0)
取决于人们所谓的“无国籍”。
如果无国籍者意味着“不能拥有ref
”那么它就是:
function isStateless(Component) {
return typeof Component !== 'string' && !Component.prototype.render
}
答案 3 :(得分:0)
这现在对我有用(反应16.12.0),以测试组件是否为功能。
(我需要用它来处理是否需要用React.forwardRef
包装一个组件,以避免类似https://github.com/yjose/reactjs-popup/issues/137这样的问题)
(typeof component === "object" && typeof component.type === "function")