Bagaimana untuk Menambah Teg Skrip kepada Komponen Bertindak?

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:

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

Mencipta Elemen DOM Secara Dinamik:

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() {
        // ... Your component logic
    }
}

Menggunakan Cangkuk (useEffect with Pembersihan):

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

Menggunakan Cangkuk (useEffect tanpa Pembersihan):

import { useEffect } from 'react';

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);
  }, [url]);
};

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!