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