Bagaimana untuk Menambah Tag Skrip secara Dinamik dalam React?

Menambah Tag Skrip ke React/JSX

Untuk pemuatan skrip dinamik, terdapat beberapa pendekatan yang perlu dipertimbangkan:

Pilihan 1: Menggunakan Kaedah Kitaran Hayat componentDidMount

Untuk skrip yang perlu dilaksanakan sahaja apabila komponen dipasang, anda boleh menggunakan kaedah componentDidMount:

componentDidMount() {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

Pilihan 2: Menggunakan useEffect Hook

Dengan kemunculan cangkuk dalam React, useEffect menawarkan penyelesaian yang lebih ringkas dan boleh diguna semula:

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

Pilihan 3: Mengambil dan Melaksanakan Skrip Secara Dinamik

Jika skrip perlu diambil dan dilaksanakan beberapa kali, pendekatan yang lebih dinamik diperlukan:

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

Pertimbangkan Modul/ Pendekatan Pakej

Namun, sebelum menggunakan skrip dinamik memuatkan, sentiasa dinasihatkan untuk mengesahkan terlebih dahulu sama ada skrip yang diperlukan tersedia sebagai modul atau pakej melalui npm. Pendekatan ini menawarkan beberapa faedah:

• Kod boleh diimport dengan bersih
• Kemas kini pakej boleh diurus dengan mudah
• Potensi untuk memanfaatkan mekanisme pengendalian ralat terbina dalam

Atas ialah kandungan terperinci Bagaimana untuk Menambah Tag Skrip secara Dinamik dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!