如何安全且有效率地為React元件新增腳本標籤？

在 React/JSX 中加入腳本標籤

本題的目標是探索在 React 元件中加入內聯腳本的方法。使用者嘗試使用內聯腳本標籤和angerlySetInnerHTML屬性來載入外部腳本，但這兩種方法似乎都無法執行所需的腳本。

建議的一個解決方案是在React元件中建立一個componentDidMount方法並動態建立建立腳本元素並將其附加到 DOM。這種方法確保腳本在元件安裝時僅執行一次。

但是，React 中更現代和推薦的方法是使用 useEffect 鉤子。此鉤子可讓您在元件渲染後執行副作用，例如進行 API 呼叫或操作 DOM。

以下程式碼片段示範如何使用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);
  }
}, []);

透過將此程式碼包裝在自訂掛鉤中，它可以在多個元件中重複使用：

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]);
};

可以用作如下圖：

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

將useEffect鉤子與自訂腳本鉤子結合使用，提供了一種在 React 元件中載入和執行腳本的乾淨高效的方法。

以上是如何安全且有效率地為React元件新增腳本標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！