javascript 从带有标签的公共文件夹运行js脚本< script>,但不从本地文件导入

mkh04yzy  于 2023-02-21  发布在  Java
关注(0)|答案(1)|浏览(91)

当我把js脚本放到public文件夹中,然后这样导入到script标签script.src = "/scoper.js";中,js脚本运行正常,但是当我把那个js脚本移动到src文件夹中,然后直接导入,脚本运行不正常,那么从<script src="...">运行js脚本和从import { scoper } from "./scoper.js";运行js脚本有什么区别呢?https:codesandbox.io/s/stylesheet-scoping-b0k9pp?file=/src/App.js:65-102当脚本运行成功时,“Hello World”文本应为红色。
App.js

import React, { useEffect } from "react";
import "./styles.css";
import { scoper } from "./scoper.js"; // this doesn't work

export default function App() {
  useEffect(() => {
    const script = document.createElement("script");

    // script.src = "/scoper.js"; //this works

    script.async = true;
    document.body.appendChild(script);

    let style = document.createElement("style");
    style.setAttribute("scoped", "");
    style.innerHTML =
      ".Puma {" +
      "color: purple;" +
      "font-size: 50px;" +
      "text-align: left;" +
      "}";
    let main = document.getElementById("raptors");
    main.appendChild(style);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <>
      <div id="lakers" className="Puma">
        <div>Hello World!</div>
      </div>
      <div id="raptors" className="Puma">
        <h1>Raptors win!</h1>
      </div>
    </>
  );
}
nmpmafwu

nmpmafwu1#

使用import { scoper } from "./scoper.js";时,脚本在文件App.js第一次执行时导入并执行,即定义function App() { ...时,但在执行App()之前,并且在渲染任何组件之前。
useEffect(() => { ...是在组件渲染之后执行的,所以在执行导入的脚本时,React渲染的DOM元素是可用的。
一般来说,你不应该在一个模块中的脚本被导入后立即执行它,因为这总是会令人困惑 (当然也有例外)。相反,你应该导出一个对象或函数,这样导入文件就可以选择何时调用它。如果导入文件想立即执行导入的函数,它仍然可以这样做。

相关问题