React js多用途脚本[关闭]答案

【问题标题】：React js multi useScript [closed]React js多用途脚本[关闭]
【发布时间】：2022-10-14 00:23:23
【问题描述】：

我有以下代码：

钩：

import { useEffect } from 'react';

const useScript = url => {
    useEffect(() => {
        const script = document.createElement('script');

        script.src = url;
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useScript;

利用：

useScript("script1.js")
useScript("script2.js")
useScript("script3.js")

我想如何使用它：

useScriptMulti("script1.js","script2.js","script3.js")

你能帮我个忙吗？

【问题讨论】：

手拿什么？你还没有描述问题...？你有一个钩子，你想写另一个钩子。试试看！如果你被卡住了，在你的尝试中发布一个问题，以便人们可以帮助你。
也就是说，有几点观察： 1. 那里的清理回调基本上没有意义，从 DOM 中删除 script 元素不会对其加载的代码做任何事情。一旦你加载了一个脚本，你就不能卸载它（在一般情况下；可以编写一个可以完全清理自己的脚本）。 2. 没有理由在主 HTML 解析完成后动态添加的 script 元素上使用 async = true，它没有任何效果。
同样的事情也适用于这里：usehooks-ts.com/react-hook/use-script
也许我缺少的async 有一些微妙之处，但坦率地说我不这么认为。请注意，他们别删除清理中的脚本元素（大概是因为没有意义）。
移除侦听器，因为它已经完成，在这种情况下它是为了什么？

标签： javascript reactjs react-hooks hook

【解决方案1】：

您可以将 url 数组传递给 hook。

const useScripts = urls => {
    useEffect(() => {

        const scripts = urls.map((url) => {
            const script = document.createElement('script');

            script.src = url;
            script.async = true;
            document.body.appendChild(script);
            return script;
        };

        return () => {
            srcipts.forEach((script) => document.body.removeChild(script));
        }
    }, [urls]);
};

export default useScript;

然后将它用于一个脚本useScripts(["script1.js"]) 或多个useScripts(["script1.js", "script2.js"])

【讨论】：