如何向 React 组件添加脚本标签？-js教程-PHP中文网

如何向 React 组件添加脚本标签？

Linda Hamilton

发布： 2024-12-09 09:14:06

原创

973 人浏览过

How to Add Script Tags to React Components?

向 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中文网其他相关文章！