如何安全地在 React 元件中新增腳本標籤？

為 React/JSX 新增腳本標籤

在 React 中，您可以使用危險的SetInnerHTML 新增內嵌腳本或在中建立腳本元素componentDidMount生命週期

使用angerouslySetInnerHTML

允許您將原始HTML 指定為字串，但請務必注意，應謹慎使用它，因為它會允許您將原始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中文網其他相關文章！