Bagaimana untuk Menambah Tag Skrip dengan Selamat dan Cekap kepada Komponen Bertindak balas?

Menambah Teg Skrip ke React/JSX

Matlamat soalan ini adalah untuk meneroka kaedah menambah skrip sebaris pada komponen React. Pengguna telah cuba memuatkan skrip luaran menggunakan kedua-dua teg skrip sebaris dan sifat dangerouslySetInnerHTML, tetapi kedua-dua pendekatan nampaknya tidak melaksanakan skrip yang diingini.

Satu penyelesaian yang dicadangkan ialah mencipta kaedah componentDidMount dalam komponen React dan secara dinamik buat dan tambahkan elemen skrip pada DOM. Pendekatan ini memastikan bahawa skrip dilaksanakan sekali sahaja apabila komponen dipasang.

Walau bagaimanapun, pendekatan yang lebih moden dan disyorkan dalam React ialah menggunakan cangkuk useEffect. Cangkuk ini membolehkan anda melakukan kesan sampingan, seperti membuat panggilan API atau memanipulasi DOM, selepas komponen dipaparkan.

Coretan kod berikut menunjukkan cara menggunakan useEffect untuk memuatkan skrip:

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

Dengan membungkus kod ini dalam cangkuk tersuai, ia boleh digunakan semula dalam berbilang komponen:

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

Yang boleh digunakan seperti berikut:

import useScript from 'hooks/useScript';

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

  // Rest of the component
}

Menggunakan cangkuk useEffect dengan cangkuk skrip tersuai menyediakan cara yang bersih dan cekap untuk memuatkan dan melaksanakan skrip dalam komponen React .

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