Ошибка неактивности: инвариантное нарушение: React.render(): недопустимый элемент компонента

Я новичок-новичок

и я создаю простой класс, функцию и рендеринг для тела.

Однако

Я получаю 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>

Любые идеи о том, что не так?

Ответы

Ответ 1

Измените React.render(new HelloWorld(), document.body); на React.render(React.createElement(HelloWorld), document.body);, и он должен работать. Функция The React.render ожидает a ReactElement, которую вы можете создать с помощью React.createElement.

Здесь вы можете увидеть документы вместе с некоторыми другими полезными функциями: https://facebook.github.io/react/docs/top-level-api.html

Ответ 2

используйте <HelloWorld/> вместо new HelloWorld()

Ответ 3

Написание метода рендеринга вашего компонента, например, приведет к той же ошибке:

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

Показанный код вызовет ту же ошибку, потому что теперь есть элемент рядом с возвратом (вы не должны прерывать его там).