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是组件。元素基本上是＆＃34;实例化＆＃34;的结果。（也不是真的，不确定正确的术语是什么）一个组件。它是构造函数/函数/字符串（用于HTML组件），道具和子元素的组合。

当你致电React.createElement(Foo)时，你会得到一个元素，这就是<Foo />正在做的事情。

＆＃13;

const Foo = () => {
    return (
    <div>foo</div>
  );
}
console.log(React.isValidElement(<Foo />));
console.log(<Foo bar={42} />);

＆＃13;

<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>

＆＃13;

Answer 2

const Foo = () => <div>foo</div>;

class Bar extends React.Component {
    render() {
       return (
          <div>bar</div>
       )
    }
}

console.log(React.isValidElement(<Foo />));
console.log(React.isValidElement(<Bar />));

Answer 3

要检查功能组件，请执行以下操作：

typeof Foo === 'function'

React isValidElement出错为false

3 个答案: