h1 元素没有出现

Question

我正在尝试反应，但我的 cdn 由于某种原因无法正常工作。 我的浏览器是chrome。 我的代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div id="root"></div>

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

在 main.js 中：

ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))

Answer 1

它是脚本类型的问题。

我复制了它并使用以下代码使其工作：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" defer crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" defer crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js" defer></script>
    <script src="main.js" type="text/babel" defer></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

如反应文档中所述，您需要添加一个 type="text/babel" 才能与 JSX 一起使用。 这是有关如何在没有预构建工具的情况下向网站添加反应的文档的链接。 https://reactjs.org/docs/add-react-to-a-website.html

编辑：另外，请考虑对要添加到站点的每个脚本使用defer ，因为它允许您以更简单的方式管理脚本流。

h1 元素没有出现

问题描述

1 个解决方案

解决方案1
1 2020-08-22 23:53:55

h1 元素没有出现

问题描述

1 个解决方案

解决方案1 1 2020-08-22 23:53:55

解决方案1
1 2020-08-22 23:53:55