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

Question

React.isValidElement 为 React 组件和 React 元素测试 true。具体来说，我将如何测试一个对象是一个 React 组件？目前，我正在通过测试typeof obj.type === 'function' 来做到这一点，但我希望有更好的方法。

Answer 1

ReactComponent.prototype.isReactComponent = {};

/node_modules/react/lib/ReactComponent.js 的 33 个

使用 npm 安装。在这一点上，没有直接的方法可以检查其有效性。你的做法是正确的。

Answer 2

如果你真的想输入检查

• 组件与元素

• 类与功能组件

• 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

Example Codepen

Answer 3

除了@EmanualJade 答案，您还可以使用它来检查变量是否为function component

React.isValidElement(Component())

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

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

Answer 4

如果您想知道对于对象变量的特定实例有什么类，那么你想要的是instanceof 运算符...

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

我测试了document.createElement('div')（返回真）和<someReactJSComponent />（返回假）。

instanceof 是 JavaScript 中一个强大而有用的工具。查看官方 MDN 文档：Mozilla Documentation Network: instanceof

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

另外，我在网上上传了一个带有code-sandbox的代码示例来演示以上原理...

在线代码沙箱：

https://codesandbox.io/s/kmxjq27ol5

代码：

function App() { return (//insert JSX here//);};
const app = App();
const ele = document.createElement("div");
const rootElement = document.getElementById("root");
ReactDOM.render(app, rootElement);
console.log(
  "Hello!  Is a React Component HTML???" +
    (app instanceof HTMLElement) +
    "|  Is an HTML element HTML???" +
    (ele instanceof HTMLElement) +
    "|"
);

代码结果：

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

没问题（测试过 Chrome 和 FF）。只需使用instanceof。

Answer 5

class Test extends React.Component {}

console.log(!!Test.prototype.isReactComponent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 6

最简单的解决方案是：

React.isValidElement(element)

Answer 7

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

如果您遇到此问题，您可能需要查看react-is NPM 包页面：https://www.npmjs.com/package/react-is

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

要检查值是否为元素类型，请执行以下操作：ReactIs.isValidElementType(obj)