Question

第9行上的div id没有被调用。输出不显示在reactDom.render函数下调用的文本。它仅在第10行上打印“ HTML中的索引表单中的Hello World”。我缺少什么？？？
使用Express Web服务器运行。

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    <title>React App</title>
  </head>

  <body>
    <h1>Hello world from the index</h1>
    <div id="app1"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>HELLLLLOO</h1>,
        document.getElementById('app1')
      );
    </script>
  </body>

</html>

Answer 1

您的脚本中似乎是React的旧版本，其中不包含ReactDOM对象。但是，使用最新的React版本并将ReactDom更改为ReactDOM，您的代码可以正常编译。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
    <script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

  </head>

  <body>

    <h1>Hello world from the index form within HTML</h1>

    <div id="app1"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>HELLLLLOO</h1>,
        document.getElementById('app1')
      );
    </script>
  </body>

</html>

Answer 2

CDN链接看起来已过时。效果很好：

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello</h1>,
    document.getElementById('root')
);
</script>

嗯，我认为您在更新代码中的问题似乎与babel链接有关。应该是babel而不是浏览器。

例如，只需替换：

https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js

使用：

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js

这里是working fiddle。

以下是您可以考虑使用特定版本的链接列表：

https://cdnjs.com/libraries/react

https://cdnjs.com/libraries/react-dom

https://cdnjs.com/libraries/babel-standalone

React代码未被调用-React基础

2 个答案: