Question

我是ReactJS的新手。我正在尝试使用ReactDOM渲染一个简单的div但不能这样做。这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script>
      ReactDOM.render(
        <h1>Hello, world!</h1>,
          document.getElementById('root')
      );
    </script>
  </body>
</html>

有人可以指导我为什么会这样吗？

注意 - 我使用的是React 15.4.2和Chrome 57版。

Answer 1

您需要将transpiler babel添加到您的项目中。你可以根据自己的需要调整我的例子。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
    </script>
  </body>
</html>

看另一个不使用babel的例子

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    ReactDOM.render(React.createElement('h1', null, 'hello'), document.getElementById('root'));
  </script>
</body>

</html>

Answer 2

你试图在没有任何转换器（babel等）的情况下使用JSX。

请改为尝试：

ReactDOM.render(
        React.createElement('hi', 'Hello, world!'),
          document.getElementById('root')
      );

或者添加一个脚本和type来处理JSX。

无法呈现简单的ReactDOM div

2 个答案: