如何在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中文網其他相關文章！