在 React 应用中嵌入外部 Script 标签的正确方法-html教程-PHP中文网

在 React 应用中嵌入外部 Script 标签的正确方法

心靈之曲

发布： 2025-08-22 21:30:31

原创

883人浏览过

在 react 应用中嵌入外部 script 标签的正确方法

本文旨在解决 React 应用中无法直接通过 JSX 嵌入外部 script 标签的问题。由于 React 使用 innerHTML 来操作 DOM，出于安全考虑，直接插入的 script 标签不会被执行。本文将介绍如何利用 useEffect hook 在 React 组件中动态加载和卸载外部 JavaScript 文件，以实现嵌入外部 script 标签的功能。

动态加载 Script 标签

在 React 应用中，直接将包含 <script> 标签的 HTML 代码嵌入到 JSX 中，通常无法正常执行。这是因为 React 使用 innerHTML 来更新 DOM，而 innerHTML 默认会阻止 script 标签的执行，以防止潜在的安全问题。

为了解决这个问题，我们可以使用 useEffect hook 来动态地创建和添加 script 标签到 DOM 中。useEffect 允许我们在组件挂载后执行副作用操作，例如添加外部脚本。

以下是一个示例，展示了如何在 React 组件中动态加载 GoFundMe 的嵌入脚本：

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

import React, { useEffect } from 'react';

const Donation = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://www.gofundme.com/static/js/embed.js";
    script.async = true; // 异步加载，避免阻塞页面渲染

    document.body.appendChild(script);

    // 组件卸载时移除 script 标签，避免内存泄漏
    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空依赖数组，确保 useEffect 只在组件挂载和卸载时执行

  return (
    <div>
      <div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div>
    </div>
  );
};

export default Donation;

登录后复制

代码解释：

useEffect Hook: useEffect 接收两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载后执行。
创建 Script 元素: document.createElement('script') 创建一个新的 script 标签。
设置 Script 属性: script.src 设置 script 标签的 src 属性，指向外部 JavaScript 文件的 URL。script.async = true 设置 async 属性，使脚本异步加载，不会阻塞页面渲染。
添加 Script 到 DOM: document.body.appendChild(script) 将 script 标签添加到 document.body 中。
清理函数: useEffect 的回调函数可以返回一个清理函数。这个清理函数会在组件卸载时执行，用于移除副作用。在这个例子中，我们在清理函数中移除了 script 标签，以避免内存泄漏。
依赖数组: useEffect 的第二个参数是一个依赖数组。只有当依赖数组中的值发生变化时，useEffect 的回调函数才会重新执行。在这个例子中，我们传递了一个空数组 []，这意味着 useEffect 的回调函数只会在组件挂载和卸载时执行一次。