外部js文件中的Reactjs组件有时不会加载

Reactjs component in an external js file does not load sometime

本文关键字：加载 组件 Reactjs js 文件 外部      更新时间：2024-03-13

我已经创建了一个非常基本的ReactJs组件。

我创建了一个html文件。代码低于

<!DOCTYPE html>
<html>
<head>
    <meta charset="I`enter code here`SO-8859-1">
    <title>Basics of React</title>
</head>
<body>
    <div id="example"></div>

    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel" src="../js/ReactBasic.js"></script>
</body>
</html>

js文件代码低于

 ReactDOM.render(
    <h1>This content is from a React Component!</h1>,
    document.getElementById('example')
);

问题是，当我尝试运行相同的程序时。它没有显示我试图渲染的React组件。然而，如果我将同一段代码嵌入到html文件中，它也可以正常工作。这个问题不是React库附带的示例，而是我创建的htmls。这清楚地表明不存在装载问题。

我是React的新手，因此想确认这里可能存在的问题。

由于您没有使用npm，这是由于JS文件的路径造成的。它无法找到您的JS文件，因此无法加载到DOM中。

要解决此问题，您有两个选项：

  1. 将JS和HTML文件放在同一目录中，并更新HTML文件中的路径
  2. 使用位于单独目录中的JS文件的绝对路径
相关文章：