如何為 React 元件新增腳本標籤？

為 React/JSX 新增腳本標籤

在 React 中，新增內聯腳本可能是一項簡單的任務。要實現此目的，請考慮以下選項：

使用動態程式碼注入進行條件渲染：

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

動態建立DOM 元素：

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

使用鉤子（useEffect帶清理）：

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

使用Hooks（useEffect 不含清理）：

import { useEffect } from 'react';

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

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

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

注意：如果您

注意：如果您注意：如果您想要在渲染期間動態取得和執行腳本，通常建議使用第一種方法，而其他方法適合在將元件掛載到DOM中時載入一次腳本。

以上是如何為 React 元件新增腳本標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！