我怎样才能正确地让这个组件渲染？

Question

我定义了一个组件，Pragmatometer，我正在尝试将其渲染到 div#main:

        React.render(React.createElement(Pragmatometer,
          {}), document.getElementById('main'));

Chrome 的 JavaScript 控制台显示，ReactJS 的行号以千计：

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

我的HTML是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Pragmatometer</title>
    <style type="text/css">
        body
            {
            font-family: Verdana, Arial, sans;
            }
    </style>
</head>
<body>
    <h1>Pragmatometer</h1>
    <div id="main"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js">
    </script>
    <script
      src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js">
    </script>

    <script src="/js/site.js"></script>
</body>
</html>

是 React.render() 调用中的错误，还是与 Pragmatometer 组件有关的问题？此类问题的常见嫌疑人是什么？

谢谢，

Answer 1

这个有效

React.render(
      React.createElement('Pragmatometer',
          null, 'Hello'),
        document.getElementById('main')
      );

如果你想在没有单引号的情况下使用 Pragmatometer '' 你应该设置它我想知道你为什么不使用 jsx 它很容易编写组件。

Answer 2

渲染现在通过 ReactDOM.render()

完成

ReactDOM.render(
    React.createElement('Pragmatometer',
        null, 'Hello'),
        document.getElementById('app')
    );

我怎样才能正确地让这个组件渲染？

How can I correctly get this component to render?

javascript

reactjs