这是一个简单的例子:
const Foo = () => {
return (
<div>foo</div>
);
}
class Bar extends React.Component {
render() {
return (
<div>bar</div>
)
}
}
console.log(React.isValidElement(Foo));
console.log(React.isValidElement(Bar));
这两个都返回 false。这是为什么?
最佳答案
Component != Element
Foo
和 Bar
是组件。 元素 基本上是“实例化”(也不是真的,不确定正确的术语是什么)组件的结果。它是构造函数/函数/字符串(对于 HTML 组件)、 Prop 和子项的组合。
调用 React.createElement(Foo)
时会得到一个元素,这就是<Foo />
正在幕后进行。
const Foo = () => {
return (
<div>foo</div>
);
}
console.log(React.isValidElement(<Foo />));
console.log(<Foo bar={42} />);
<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>
关于javascript - React isValidElement 结果为 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46432955/