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