如何安全地向 React 组件添加脚本标签？

向 React/JSX 添加脚本标签

在 React 中，您可以使用危险的SetInnerHTML 添加内联脚本或在中创建脚本元素componentDidMount 生命周期

使用angerouslySetInnerHTML

允许您将原始 HTML 指定为字符串，但请务必注意，应谨慎使用它，因为它会带来安全漏洞。例如：

<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>

但是，这种方法可能并不总是执行所需的脚本。

在 componentDidMount 中创建脚本元素

考虑以下因素：

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

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

    document.body.appendChild(script);
}

此方法是动态的在组件挂载时将脚本插入到 DOM 中。

推荐方法：使用 npm 包

在使用内联脚本之前，建议检查是否有预定义的脚本构建的 npm 包可用于您要加载的脚本。例如，如果你想加载 Typekit，你可以安装 typekit 包并导入它，如下所示：

import Typekit from 'typekit';

更新：利用 useEffect Hook

引入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);
  }
}, []);

您还可以将此逻辑包装到自定义挂钩中以方便重用。

以上是如何安全地向 React 组件添加脚本标签？的详细内容。更多信息请关注PHP中文网其他相关文章！