在React中添加外部Javascript脚本

Question

我希望使用Helmet组件在React中包含并运行一些js文件。这里是一个简单的代码：

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from "react-helmet";

import "./styles.css";

function App() {
  console.log("op");

  return (
    <div className="App">
      <Helmet>
        <script src="hello.js" type="text/jsx" />
      </Helmet>
      <h1>Hellok CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

一个超级简单的 js 脚本来包含和运行：

hello.js:

console.log("opl882...")
document.body.style.backgroundColor = "red";

但是脚本似乎无法正常工作！ - 我没有控制台输出和/或背景颜色改变。当我使用js代码作为内联代码时，情况很奇怪：

 <Helmet>
   <script type="text/javascript">
     console.log("opl882..."); document.body.style.backgroundColor = "red"
   </script>
 </Helmet>

运行正常！

为什么外部的js文件不能工作？

- Daar44

---

你有任何错误吗？文件找到了吗？试着将脚本的 type 属性从 text/jsx 改为 text/javascript。 - Emiel Zuurbier

@EmielZuurbier 当我更改为 text/javascript 时，我收到了一个错误：“意外的令牌'<'”... - Daar44

尝试将 text/javascript 保留不变，并将源更改为 src={"./hello.js"}。 - Bilal Abraham

@BilalAbraham 很遗憾，将源更改为src = {"./hello.js"}并没有帮助 - 仍然会得到“意外的标记'<'”... - Daar44

@Daar44 我觉得此时此刻你应该使用我的解决方案。 - Bilal Abraham

@BilalAbraham，你有没有更多的想法，为什么Helmet解决方案仍然无法正常工作？它在许多网站/教程中都被推荐使用... - Daar44

Answer 1

我通常不会使用

- Bilal Abraham

---

好的，朋友，这个方法确实有效，但我仍然很好奇为什么我的方法不行？ - Daar44

@Daar44 我认为在JSX中<script></script>标签根本不起作用，你总是需要作为模块导入。此外，如果你想从.js文件中发送一个值，你只需编写export default VARIABLE_TO_EXPORT。 - Bilal Abraham

好的，我会接受并点赞，但我仍然想知道为什么使用Helmet的解决方案不起作用！ - Daar44

@BilalAbraham react-helmet 支持 <script> 标签。 - Emiel Zuurbier

@EmielZuurbier 谢谢哈哈，我甚至没有意识到你在使用React Helmet，为什么Emiel的text/javascript不起作用...毕竟该文件的类型不应该是text/jsx，因为那个.js文件没有JSX。 - Bilal Abraham

@BilalAbraham，我尝试了几种方法来将.js文件添加到React中，但不幸的是都没有成功！然后我尝试了你的方法，将.js文件导入到头部，这样做效果很好，最终解决了问题。然而，在某些页面上我遇到了另一个问题：从某些属性中获取到null值。这是因为JavaScript在HTML代码之前加载。我想知道是否有一种方法可以导入.js文件，在HTML代码完全加载后再加载它们。拜托了。 - undefined

Answer 2

我认为你可能看到的核心问题是，hello.js在给定的URL上对于浏览器来说不可访问。 <script>标签中的src属性为浏览器提供了加载脚本的URL。确认您可以直接访问URL上的脚本：如果它是可访问的，它应该只会作为文本在您的浏览器中加载以供阅读。

使文件直接可访问的具体细节因设置而异，但对于标准的Create-React-App项目（以及许多其他项目）有一个名为public的文件夹，您可以将需要直接通过URL访问的文件放在其中。要验证它是否工作，请在那里添加您的文件，然后尝试从应用程序的根目录访问它。例如，如果您的应用程序运行在localhost:3000上，则可以通过将浏览器导航到localhost:3000/hello.js来验证文件是否可访问。文件内容应出现在浏览器中并显示为纯文本。（另外，小小地说一下，我会使用/hello.js作为src位置，这样的URL对我来说更不含糊。）

一旦那个工作正常，就在这里查看 StackOverflow ，了解如何在 React 中加载和运行普通的 JS 文件：向React / JSX添加脚本标记。 在您的情况下，您已经在使用 Helmet，所以我认为您已经发布的代码大多可以正常工作，但是该链接中的答案应该有助于解决问题。虽然我认为您想将 type 更改为 text/javascript 或 完全省略它。

最后，我认为内联 JS 能够工作而引用文件不能工作的原因是您的浏览器无法找到/访问 "hello.js"。 内联 JS 只是按照其原样运行，因为 JS 已经嵌入其中。 但是，要从 "src" 运行它，必须先找到源代码，因此，如果它在您提供的 URL 中找不到它，则不会运行。 至于 Bilal 在这里给出的另一个答案，那也可以工作，但它取决于某种 webpack 魔法或其他东西来查看它是 JavaScript 文件，然后以这样一种方式打包它，以便它能够运行。这并没有什么错，但你基本上是把

- Erdős-Bacon

Answer 3

useEffect(()=>{require('./paywell.js')},[])

- Awais Niaz

---

能够简要解释一下这个程序是如何工作的/如何解决问题，以及它与现有答案的不同之处，会很好。 - starball