2015-05-16 22 views
20

Tôi đã trải qua một hướng dẫn react.js, với ví dụ đơn giản về hello world. Tôi không thể tìm thấy một lý do tại sao sau đây không nên làm việc, nhưng tôi tiếp tục nhận được lỗi này.Phần tử thành phần không hợp lệ trong React.JS

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

Tôi có mã sau đây. Dường như nó hoạt động nếu tôi làm React.createElement, nhưng không phải cho các phần tử JSX.

<!doctype html> 
<html> 
<head> 
    <script src="https://fb.me/react-0.13.3.js"></script> 
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
    <script type="text/jsx"> 
     document.body.onload = function(){ 
      console.log("shuff") 
      var HelloWorld = React.createClass({ 
       render: function(){ 
        return <div>Hello, Ian Shuff!</div>; 
       } 
      }); 

      React.render(new HelloWorld(), document.getElementById("test")) 
     } 

    </script> 
</head> 
<body> 
    <div id="test"></div> 
</body> 
</html> 

Trả lời

21

Bạn phải vượt qua để render <HelloWorld />, không new HelloWorld()

React.render(<HelloWorld />, document.getElementById("test")) 

Example

jsx-in-depth

Hoặc bạn có thể sử dụng React.createElement, như vậy

React.render(React.createElement(HelloWorld, null), document.getElementById("test")) 

Example

Các vấn đề liên quan