Menambah Tag Skrip pada React/JSX
Dalam React, menambah skrip sebaris pada komponen boleh menjadi tugas yang mudah. Untuk mencapai matlamat ini, pertimbangkan pilihan berikut:
Perenderan Bersyarat dengan Suntikan Kod Dinamik:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from 'react' ;
export default class extends Component {
render() {
if (process.env.NODE_ENV === 'production' ) {
return (
<script src= "https://use.typekit.net/foobar.js" />
);
}
return null;
}
}
|
Salin selepas log masuk
Mencipta Elemen DOM Secara Dinamik:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | class Component extends React.Component {
componentDidMount() {
const script = document.createElement( 'script' );
script.src = 'https://use.typekit.net/foobar.js' ;
script.async = true;
document.body.appendChild(script);
}
render() {
}
}
|
Salin selepas log masuk
Menggunakan Cangkuk (useEffect with Pembersihan):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { useEffect, useRef } from 'react' ;
const useScript = (url) => {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) {
const script = document.createElement( 'script' );
script.src = url;
script.async = true;
ref.current = script;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}
}, [url]);
};
|
Salin selepas log masuk
Menggunakan Cangkuk (useEffect tanpa Pembersihan):
1 2 3 4 5 6 7 8 9 10 11 12 | import { useEffect } from 'react' ;
const useScript = (url) => {
useEffect(() => {
const script = document.createElement( 'script' );
script.src = url;
script.async = true;
document.body.appendChild(script);
}, [url]);
};
|
Salin selepas log masuk
Nota: Biasanya disyorkan untuk gunakan pendekatan pertama jika anda ingin mengambil dan melaksanakan skrip secara dinamik semasa pemaparan, manakala pendekatan lain sesuai untuk memuatkan skrip sekali apabila memasang komponen ke dalam DOM.
Atas ialah kandungan terperinci Bagaimana untuk Menambah Teg Skrip kepada Komponen Bertindak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!