javascript - React isValidElement 结果为 false

Question

这是一个简单的例子:

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。这是为什么？

Answer 1

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>