如何检测React组件与React元素？

Question

React.isValidElement对React组件以及React元素都进行测试。我将如何测试，具体来说，一个对象是一个React组件？目前，我正在测试typeof obj.type === 'function'，但我希望有更好的方法。

Answer 1

ReactComponent.prototype.isReactComponent = {}; 

/node_modules/react/lib/ReactComponent.js

33安装使用NPM。此时，没有可用的直接方法来检查其有效性。你在做什么是正确的。

Answer 2

如果你真的想VS元素

• 组件类型检查

• 类VS功能组件

• DOM VS复合元素

你可以试试像这样的东西。

function isClassComponent(component) { 
    return (
     typeof component === 'function' && 
     !!component.prototype.isReactComponent 
    ) ? true : false 
} 

function isFunctionComponent(component) { 
    return (
     typeof component === 'function' && 
     String(component).includes('return React.createElement') 
    ) ? true : false; 
} 

function isReactComponent(component) { 
    return (
     isClassComponent(component) || 
     isFunctionComponent(component) 
    ) ? true : false; 
} 

function isElement(element) { 
    return React.isValidElement(element); 
} 

function isDOMTypeElement(element) { 
    return isElement(element) && typeof element.type === 'string'; 
} 

function isCompositeTypeElement(element) { 
    return isElement(element) && typeof element.type === 'function'; 
} 

使用

// CLASS BASED COMPONENT 
class Foo extends React.Component { 
    render(){ 
     return <h1>Hello</h1>; 
    } 
} 

const foo = <Foo />; 

//FUNCTIONAL COMPONENT 
function Bar (props) { return <h1>World</h1> } 
const bar = <Bar />; 

// REACT ELEMENT 
const header = <h1>Title</h1>; 

// CHECK 
isReactComponent(Foo); // true 
isClassComponent(Foo); // true 
isFunctionComponent(Foo); // false 
isElement(Foo); // false 

isReactComponent(<Foo />) // false 
isElement(<Foo />) // true 
isDOMTypeElement(<Foo />) // false 
isCompositeTypeElement(<Foo />) // true 

isReactComponent(Bar); // true 
isClassComponent(Bar); // false 
isFunctionComponent(Bar); // true 
isElement(Bar); // false 

isReactComponent(<Bar />) // false 
isElement(<Bar />) // true 
isDOMTypeElement(<Bar />) // false 
isCompositeTypeElement(<Bar />) // true 

isReactComponent(header); // false 
isElement(header); // true 
isDOMTypeElement(header) // true 
isCompositeTypeElement(header) // false 

Example Codepen

Answer 3

除了@EmanualJade答案，你可以用它来检查，如果一个变量是一个function component

React.isValidElement(Component()) 

正如@莱昂纳多指出，一些编译器可能会导致此失败：

String(component).includes('return React.createElement')