javascript - 将外部 javascript 脚本添加到 React

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 脚本来包含和运行:

你好.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

我通常不使用脚本标签在 React 中实现 .js 文件。相反，您应该像这样在顶部导入它(假设“./hello.js”是文件的路径):

import './hello.js'

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