Question

jsx内联脚本时第一个示例为什么起作用，而第二个示例却不起作用：

更新：这两个示例在服务器上运行时均有效，但仅通过从文件系统中单击hello.html即可运行。

第一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type='text.jsx'>             
      ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );        
    </script>
  </body>
</html>

第二个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>ReactJS Example</title>
    <script src='react/react.js'></script>
    <script src='react/react-dom.js'></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script src='hello.js' type='text/jsx'></script>
  </body>
</html>

hello.js：

 ReactDOM.render(
        <h1> Hello, React! </h1>,
        document.getElementById('container')
      );

Answer 1

我认为您在src中有一个错字。您应该更正src=>"hello.js"

更改

<script src='hello'js' type='text.jsx'></script>

到

<script src='hello.js' type='text.jsx'></script>

此外，您的脚本类型应为

text/babel

也许这会帮助您：

https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f

此外，您可能需要关注一下： Single React Component rendering with Babel Standalone with only index.html and Component 您可能需要做一些更正。

反应不加载外部js文件

1 个答案: