将外部 javascript 脚本添加到 React

Question

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

索引.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脚本来包含和运行：

你好.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文件不起作用？

Answer 1

我通常不使用脚本标签来实现 .js 文件。 相反，您应该像这样在顶部导入它（假设 './hello.js' 是文件的路径）：

import './hello.js'

该文件也必须位于 src 文件夹内。

如果您仍然困惑的评论

Answer 2

我认为您可能在这里看到的核心问题是在给定的hello.js浏览器无法访问 hello.js。 <script>标记中的src属性为浏览器提供 URL 以从中加载脚本。 验证您是否可以直接访问 URL 上的脚本：它应该只是作为文本加载到您的浏览器中以读取它是否可以访问。

使文件可直接访问的具体细节取决于您的设置，但对于标准的 Create-React-App 项目（以及许多其他项目），有一个名为public的文件夹，您可以将需要通过 URL 直接访问的文件放入那里。 要验证它是否正常工作，请在此处添加您的文件，然后尝试从应用程序的根目录访问它。 例如，如果您的应用程序在localhost:3000上运行，您可以通过将浏览器导航到localhost:3000/hello.js来验证该文件是否可访问。 文件内容应以纯文本形式显示在浏览器中。 （另外，小挑剔，我会使用/hello.js作为src位置，这对我来说感觉就像一个不那么模棱两可的 URL。）

一旦工作正常，请在此处查看 StackOverflow 以了解有关在 React 中加载和运行 vanilla JS 文件的信息： 将脚本标记添加到 React/JSX 。 在您的情况下，您已经在使用 Helmet，所以我认为您已经发布的代码大部分都可以正常工作，但该链接中的答案应该有助于排除故障。 尽管我认为您想将type更改为text/javascript或完全省略它。

最后，内联 JS 有效但引用文件无效的原因是我认为这是关于您的浏览器无法找到/访问hello.js的原因。 内联 JS 只是按原样运行，因为 JS 是烘焙的。但是要从src运行它，它必须首先找到源，所以如果在你给出的 URL 找不到它，它不会跑。 至于 Bilal 在这里的另一个答案，这也可以，但它取决于某种 webpack 魔法或其他东西来查看它是一个 Javascript 文件，然后以这种方式打包它以便它运行。 这不一定有什么问题，但是您基本上是将<script>标记的创建卸载到任何解释import的过程。 （另外，请注意，如果您能够执行import './hello.js' ，那么您的hello.js文件必须位于您的整个src文件夹中，因此它不能公开访问，这意味着script src从浏览器的 POV。）

Answer 3

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