5

我已经为初学者阅读了一些关于 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>
4

2 回答 2

1

你的第一个例子的问题是它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>

于 2016-10-19T14:14:37.553 回答
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 演示

于 2016-10-19T14:00:26.497 回答