Uncaught Error: Invariant Violation: React.render(): Invalid component element
Question
I'm a react newbie
and I'm Creating a simple class and function and rendering to the body.
However,
I get an 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>
Any ideas on what is wrong?
3 answers
solution1
17 2015-06-02 15:42:49
使用<HelloWorld/>而不是new HelloWorld()
solution2
14 ACCPTED 2015-06-02 15:43:28
Change React.render(new HelloWorld(), document.body); to React.render(React.createElement(HelloWorld), document.body); and it should work. The React.render function expects a ReactElement which you can create via React.createElement .
You can see the docs here along with some other useful functions: https://facebook.github.io/react/docs/top-level-api.html
solution3
0 2016-05-18 17:01:48
Writting the render method of your component like this will launch the same Error:
...
render: function() {
return //you need "return <div>" for this to work.
<div>
<h4>MyComponent message</h4>
</div>;
}
The shown code will trigger the same error because there is now element next to the return (you shouldn't break the line there).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.