Bagaimana untuk Menambah Teg Skrip dengan Selamat untuk Komponen Bertindak balas?

Menambah Tag Skrip ke React/JSX

Dalam React, anda boleh menambah skrip sebaris menggunakan sama ada dangerouslySetInnerHTML atau mencipta elemen skrip dalam kitaran hayat componentDidMount kaedah.

Menggunakan dangerouslySetInnerHTML

membenarkan anda untuk menentukan HTML mentah sebagai rentetan, tetapi penting untuk ambil perhatian bahawa ia harus digunakan dengan berhati-hati kerana ia membuka kelemahan keselamatan. Contohnya:

<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>

Walau bagaimanapun, pendekatan ini mungkin tidak selalu melaksanakan skrip yang diingini.

Mencipta Elemen Skrip dalam componentDidMount

Pertimbangkan perkara berikut:

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

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

    document.body.appendChild(script);
}

Kaedah ini memasukkan skrip secara dinamik ke dalam DOM apabila komponen dipasang.

Pendekatan Disyorkan: Menggunakan Pakej npm

Sebelum menggunakan skrip sebaris, adalah disyorkan untuk menyemak sama ada pra -pakej npm terbina tersedia untuk skrip yang anda ingin muatkan. Sebagai contoh, jika anda ingin memuatkan Typekit, anda boleh memasang pakej typekit dan mengimportnya seperti:

import Typekit from 'typekit';

Kemas kini: Menggunakan useEffect Hook

Dengan pengenalan cangkuk, anda boleh menggunakan useEffect untuk memuatkan lebih banyak skrip dengan cekap:

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

Anda juga boleh membungkus logik ini ke dalam cangkuk tersuai untuk kebolehgunaan semula yang mudah.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Teg Skrip dengan Selamat untuk Komponen Bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!