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

Question

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

Answer 1

如果你真的想输入检查

• 组件与元素

• 类与功能组件

• DOM与复合元素

你可以尝试这样的事情。

/**
 * Removes the first occurrence of the specified element from this list,
 * if it is present (optional operation).  If this list does not contain
 * the element, it is unchanged.  More formally, removes the element with
 * the lowest index <tt>i</tt> such that
 * <tt>(o==null&nbsp;?&nbsp;get(i)==null&nbsp;:&nbsp;o.equals(get(i)))</tt>
 * (if such an element exists).  Returns <tt>true</tt> if this list
 * contained the specified element (or equivalently, if this list changed
 * as a result of the call).
 *
 * @param o element to be removed from this list, if present
 * @return <tt>true</tt> if this list contained the specified element
 * @throws ClassCastException if the type of the specified element
 *         is incompatible with this list (optional)
 * @throws NullPointerException if the specified element is null and this
 *         list does not permit null elements (optional)
 * @throws UnsupportedOperationException if the <tt>remove</tt> operation
 *         is not supported by this list
 */
boolean remove(Object o);

使用

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';
}

Example Codepen

Answer 2

ReactComponent.prototype.isReactComponent = {};

/node_modules/react/lib/ReactComponent.js

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

Answer 3

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

React.isValidElement(Component())

正如@Leonardo所指出的，一些编译器会导致失败：

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

Answer 4

最简单的解决方案是：

React.isValidElement(element)

Answer 5

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

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

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

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

Answer 6

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 7

如果你想知道一个 一个一个 > instanceof 运营商......

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

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

instanceof是JavaScript中功能强大且实用的工具。查看官方MDN文档：Mozilla Documentation Network: instanceof

  

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

另外，我已经上传了一个带有代码沙盒的代码示例，以演示上述原则......

在线代码沙盒：

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。