如何在React中动态添加脚本标签？

向 React/JSX 添加脚本标签

对于动态脚本加载，有几种方法可以考虑：

选项 1：使用 componentDidMount 生命周期方法

对于需要执行的脚本仅当组件挂载时，您可以使用 componentDidMount 方法：

componentDidMount() {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

选项 2：使用 useEffect Hook

随着 React 中 hooks 的出现，useEffect提供了更简洁和可重用的解决方案：

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

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

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

方案3：动态获取并执行脚本

如果需要多次获取并执行脚本，则需要更动态的方法：

fetch('https://use.typekit.net/foobar.js')
  .then(res => res.text())
  .then(scriptText => {
    const script = document.createElement('script');

    script.text = scriptText;

    document.body.appendChild(script);
  });

考虑模块/包方法

但是，在采用动态脚本加载之前，始终建议首先验证所需的脚本是否可通过 npm 作为模块或包使用。这种方法有几个好处：

• 可以干净地导入代码
• 可以轻松管理包更新
• 利用内置错误处理机制的潜力

以上是如何在React中动态添加脚本标签？的详细内容。更多信息请关注PHP中文网其他相关文章！