Question

我只是在学习反应 - 我正在阅读教程。我无法弄清楚为什么当我在其工作的代码中包含我的React脚本时（第一个片段）。但是，当我将脚本代码解压缩到一个单独的.js文件（第二个代码段）时，它无法正常工作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.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>

第二个片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="Scripts/custom/react.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

react.js文件：

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

作为备注，我已将上述js文件包装在<script type="text/babel"></script>中并且也无效。

我也在Code Review网站上问过这个问题，但是，我不确定它是否属于那里。

如下面的评论中所述，我确实看到语法错误，在<h1>Hello, world!</h1>,行突出显示。

Answer 1

尝试使用.jsx扩展名和text/babel类型命名文件。您必须使用Babel的.jsx扩展名来了解如何对其进行转换，使用哪些加载程序等。使用当前的.js扩展名，Babel会看到一个常规的JavaScript文件并且不执行任何操作，因此发生错误。另外，在 div之后包含您的自定义脚本，因为React必须等待root加载才能插入任何内容 - 并且还要重命名您的文件，＆＃ 39;令人困惑的是：

<div id="root"></div> <script type="text/babel" src="Scripts/custom/react.jsx"></script>

将react.js分离到自己的文件中

1 个答案: