如何有效率地為 React/JSX 元件新增腳本標籤？-js教程-PHP中文網

如何有效率地為 React/JSX 元件新增腳本標籤？

Mary-Kate Olsen

發布： 2024-12-09 04:48:10

原創

1063 人瀏覽過

How to Efficiently Add Script Tags to React/JSX Components?

在 React/JSX 中加入腳本標籤

在 React/JSX 中，有多種方法可以合併內聯腳本。一個可能的解決方案是在元件內建立一個函數，將腳本安裝到 DOM 中。例如：

componentDidMount() {
  const script = document.createElement("script");
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
}

登入後複製

但是，如果腳本已存在於 DOM 中或需要多次加載，則此方法並不理想。

更有效的方法是利用套件像 npm 這樣的管理器將腳本安裝為模組。這簡化了整合過程，並使腳本可以導入：

import {useEffect} from 'react';

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

登入後複製

此技術可確保腳本在組件安裝時僅加載一次，並在組件卸載時刪除。

為了進一步增強這種方法，可以建立一個自訂掛鉤來處理腳本載入過程：

import { useEffect } from 'react';

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

export default useScript;

登入後複製

然後可以在任何需要腳本的元件：

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // Rest of the component code
};

登入後複製

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