Bagaimana untuk Menambah Teg Skrip dengan Cekap pada Komponen React/JSX?

Menambah Tag Skrip pada React/JSX

Dalam React/JSX, terdapat beberapa pendekatan untuk menggabungkan skrip sebaris. Satu penyelesaian yang berpotensi adalah untuk mencipta fungsi dalam komponen yang memasang skrip ke dalam DOM. Contohnya:

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

Walau bagaimanapun, kaedah ini tidak sesuai jika skrip sudah wujud dalam DOM atau perlu dimuatkan beberapa kali.

Pendekatan yang lebih berkesan ialah memanfaatkan pakej pengurus seperti npm untuk memasang skrip sebagai modul. Ini memudahkan proses penyepaduan dan menjadikan skrip boleh diakses untuk import:

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

Teknik ini memastikan skrip dimuatkan sekali sahaja apabila komponen dipasang dan dialih keluar apabila komponen dinyahlekap.

Untuk meningkatkan lagi pendekatan ini, cangkuk tersuai boleh dibuat untuk mengendalikan proses pemuatan skrip:

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;

Kail tersuai ini kemudiannya boleh digunakan dalam mana-mana komponen yang memerlukan skrip:

import useScript from 'hooks/useScript';

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

Atas ialah kandungan terperinci Bagaimana untuk Menambah Teg Skrip dengan Cekap pada Komponen React/JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!