Javascript 如何检测反应组件与反应元素？

React.isValidElement

测试React组件和React元素的正确性。具体来说，我该如何测试对象是否是React组件？目前，我正在通过测试obj.type==='function'的

typeofobj.type=='function'，来实现这一点，但我希望有更好的方法

ReactComponent.prototype.isReactComponent = {};

33个/node_modules/react/lib/ReactComponent.js
使用npm安装。在这一点上，没有可用的直接方法来检查其有效性。您所做的是正确的。
如果您确实想键入检查


组件与元素

类与功能组件

DOM与复合元素


你可以试试这样的

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

function isFunctionComponent(component) {
    return (
        typeof component === 'function' && 
        String(component).includes('return React.createElement')
    )
}

function isReactComponent(component) {
    return (
        isClassComponent(component) || 
        isFunctionComponent(component)
    )
}

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

//基于类的组件
类Foo扩展了React.Component{
render（）{
回复你好；
}
}
常量foo=；
//功能部件
功能条（道具）{返回世界}
常数条=；
//反应元素
const header=标题；
//检查
isReactComponent（Foo）；//真的
isClassComponent（Foo）；//真的
isFunctionComponent（Foo）；//假的
iElement（Foo）；//假的
isReactComponent（）//false
isElement（）//true
isDOMTypeElement（）//false
iscompositypeelement（）//true
isReactComponent（条形）；//真的
isClassComponent（条形）；//假的
isFunctionComponent（条形）；//真的
isElement（巴）；//假的
isReactComponent（）//false
isElement（）//true
isDOMTypeElement（）//false
iscompositypeelement（）//true
isReactComponent（标题）；//假的
i元素（标题）；//真的
isDOMTypeElement（头）//true
iscompositypeelement（头）//false

除了@EmanualJade answer，您还可以使用它来检查变量是否是
功能组件

React.isValidElement(Component())

正如@Leonardo所指出的，某些编译器可能会导致此操作失败：

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

如果您想知道对象变量的特定实例的类，那么您需要的是instanceof操作符

function isHTMLElement(obj) {
    return (obj instanceof HTMLElement);
}

我使用
document.createElement（'div'）
（返回true）和
（返回false）进行了测试

instanceof
是JavaScript中一个强大而有用的工具。请查看有关它的官方MDN文档：

“instanceof运算符测试对象的原型链中是否存在constructor.prototype。”

此外，我还上传了一个带有代码沙盒的代码示例，以演示上述原理

在线代码沙盒：


代码：

代码结果：

没有问题（已测试铬和FF）。只需使用
instanceof

类测试扩展了React.Component{}
console.log（！！Test.prototype.isReactComponent）
最简单的解决方案是：

React.isValidElement(element)

这是一个老问题，有一个老答案

如果遇到此问题，可能需要检查
react is
NPM包页面：

这是一个官方的React模块，它考虑了诸如ref转发和备忘等细节，以检查元素类型

要检查某个值是否为元素类型，请执行以下操作：
ReactIs.isValidElementType（obj）
文章似乎缺少任何解释，说明您发布代码的原因以及预期如何使用代码。这使得SO标准的回答质量很低。我想isFunctionComponent的情况不再有效了。通过检查，我发现类似这样的东西
函数FnChild（props）{return\u React 2.default.createElement（'div'，{id:'child fn'}）；}
Downvote，因为您没有提到
String（component）.includes（'return React.createElement'）
在很多情况下都不起作用。这是一个不错的解决方案。很有趣。ThanksisFunctionComponent对于一般用例是不可靠的&在编写单元测试时。此外，如果我模仿React功能组件结构及其实例，这将无法检测到真正的组件。上述解决方案并不坚持安装节点模块。Dan Abramov:“.isReactComponent是一个impl细节，我们保留将来更改它的权利”（）我使用了
instanceof（）
，它工作得很好，只有10个字符，而ReactComponent.js是一个完整的包。为什么不使用更短的内置内容呢？作为评论比回答更合适。这是一个很好的解决方案。检查它是否在组件的类型之前是一个函数！！React.isValidElement（component（））
obj.type也可以是符号或字符串。可能还需要先执行
typeof element==='function'
。我试图在一个工作的、功能性的React组件上呈现一个字符串或React组件get
false
，使用此方法：/post publication之后已经过了很长时间。我想这个方法现在不是最终的解决方案。如果现在不起作用，请尝试使用另一个建议。React组件不是html，这就是您所证明的，它如何回答问题。嗨，学习是为了好玩！谢谢你的评论<代码>实例of

在MDN开发人员文档中有很好的文档记录。如果这个答案有任何用处的话，那就是在我发布的简单的两行沙盒演示中使用这个页面上的所有其他答案都会失败。干杯所以你是说，当涉及到HTMLElements时，没有一个答案是有效的？嗨，学习是为了乐趣！我不知道你在问什么？你不能只是想让我证实我刚才说的话。下面是一个得分最高的示例：CODE:var testcomp=；log（“TEST”+isClassComponent（testcomp）+“|”）//结果：“测试错误”。请注意其他函数，要确定react元素是否存在，请使用

isClassComponent（）

，但对于合法的react类组件，它返回false。希望这有帮助！

Hello!  Is a React Element HTML???false|  Is an HTML element HTML???true|

React.isValidElement(element)