Uncaught Error: Invariant Violation: React.render(): Invalid component element

Question

我是一个反应新手

我正在创建一个简单的 class 和函数并渲染到正文。

然而，

我得到一个 Uncaught Error: Invariant Violation: React.render(): Invalid component element.

<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/jsx">

    var HelloWorld = React.createClass({
        render: function() {
            return <div>Hello, world!</div>;
        }
    });

    React.render(new HelloWorld(), document.body);

</script>


<body>

</body>
</html>

有什么问题吗？

Answer 1

使用<HelloWorld/>代替new HelloWorld()

Answer 2

将 React.render(new HelloWorld(), document.body); 更改为 React.render(React.createElement(HelloWorld), document.body);，它应该可以工作。 The React.render 函数需要一个 ReactElement，您可以通过 React.createElement.

创建它

您可以在此处查看文档以及其他一些有用的功能：https://facebook.github.io/react/docs/top-level-api.html

Answer 3

像这样编写组件的渲染方法将启动相同的错误：

...
render: function() {
  return      //you need "return <div>" for this to work.
    <div> 
      <h4>MyComponent message</h4>
    </div>;
}

显示的代码将触发相同的错误，因为 return 旁边现在有元素（您不应该在那里换行）。

Uncaught Error: Invariant Violation: React.render(): Invalid component element

Uncaught Error: Invariant Violation: React.render(): Invalid component element

javascript

reactjs