Question

我是新手的反应

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

然而，

我得到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创建。{/ p>

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

Answer 3

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

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

显示的代码会触发相同的错误，因为返回旁边现在有元素（你不应该在那里破坏那条线）。

未捕获错误：不变违规：React.render（）：无效的组件元素

3 个答案: