React.renderComponent 不是函数

Question

我已经阅读了一些关于 ReactJs 的初学者文章。我阅读的文章仅显示代码片段。我的第一个组件有问题：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>


<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function () {
            return React.DOM.h1("hello world!!");
        }
    });

    React.renderComponent(
        HelloWorld,
        document.getElementById("content")
    );
</script>
</body>
</html>

当我打开页面时，我看到 embedded:11 Uncaught TypeError: React.renderComponent is not a function

谁能给我指出正确的方向？

我也尝试过，但没有成功：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>


<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function() {
            return React.createElement("h1", null, "Hello world!!");
        }
    });

    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>

Answer 1

编辑：我看到你使用了babel-core browser.js，它已经被弃用了，删除它并直接使用React。

删除 script 类型并将所有内容替换为：

var HelloWorld = React.createClass({
  render: function() {
    return React.createElement("h1", null, "Hello world!!");
  }
});

ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));

jsbin demo

Answer 2

你的第一个例子的问题是 React.renderComponent 不是一个函数，你需要使用 ReactDOM.render 来代替。您现在应该节省很多精力，只需使用 create-react-app 并使用此应用程序即可。它消除了使 React 快速使用所需的工具的所有痛苦（webpack 热模块重新加载）。与您需要通过任何其他途径设置的普通工具相比，它非常简单，并且是由 React 的开发人员制作的。我可以通过您正在使用的 React 版本号来判断，您正在使用的教程是非常旧的，在 Facebook 发布 create-react-app 之前很久了很难。

如果你打算内联处理它，请在头脑中使用它 -

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>

React 15 上的完整工作示例 -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
  <title>HELLO WORLD</title>
</head>
<body>
  <div id="content"></div>
  <script>
    var HelloWorld = React.createClass({
        render: function() {
            return React.createElement("h1", null, "Hello world!!");
        }
    });
    ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
  </script>
</body>
</html>

React.renderComponent 不是函数

React.renderComponent is not a function

javascript

node.js

reactjs

babeljs

react-dom