React 中嵌入 HTML 代码片段不显示的解决方案

本文旨在解决 React 应用中嵌入包含

在 React 应用中，有时我们需要嵌入一些由第三方提供的 HTML 代码片段，例如捐赠按钮、广告代码等。这些代码片段通常包含

问题原因：innerHTML 的限制

根据 HTML5 规范，通过 innerHTML 插入的

立即学习“前端免费学习笔记（深入）”；

解决方案：使用 useEffect Hook 动态加载脚本

为了解决这个问题，我们可以使用 React 的 useEffect Hook 来动态加载脚本。useEffect Hook 允许我们在组件挂载后执行副作用操作，例如添加或删除 DOM 元素。

来福FM

来福 - 你的私人AI电台

下载

以下是一个示例代码，展示如何使用 useEffect Hook 动态加载 GoFundMe 捐赠按钮的脚本：

import React, { useEffect } from 'react';

const Donation = () => {
  useEffect(() => {
    // 创建 script 标签
    const script = document.createElement('script');

    // 设置 script 标签的 src 属性
    script.src = "https://www.gofundme.com/static/js/embed.js";
    // 设置 async 属性，使其异步加载
    script.async = true;

    // 将 script 标签添加到 document.body 中
    document.body.appendChild(script);

    // 定义清理函数，在组件卸载时移除 script 标签
    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空依赖数组，确保 useEffect 只在组件挂载时执行一次

  return (
    

      

    
  );
};

export default Donation;

代码解释：

1. useEffect Hook: useEffect Hook 接收两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载后执行，依赖数组用于指定回调函数依赖的状态或属性。当依赖数组中的任何一个值发生变化时，回调函数会重新执行。
2. 创建 使用 document.createElement('script') 创建一个新的
3. 设置 src 属性: 设置
4. 设置 async 属性: 设置
5. 添加到 document.body: 将
6. 清理函数: useEffect Hook 可以返回一个清理函数。清理函数会在组件卸载时执行，用于清理副作用操作。在本例中，清理函数用于移除动态添加的
7. 空依赖数组 []: 将依赖数组设置为空数组 []，确保 useEffect Hook 只在组件挂载时执行一次。

注意事项：

• 确保外部 JavaScript 文件的 URL 是正确的。
• 如果外部 JavaScript 文件依赖于其他 JavaScript 文件，请确保它们也都被正确加载。
• 如果外部 JavaScript 文件修改了 DOM 结构，请确保 React 组件能够正确处理这些修改。
• 使用 async 属性可以避免阻塞页面的渲染，但可能会导致 JavaScript 代码执行顺序不确定。如果 JavaScript 代码的执行顺序很重要，请不要使用 async 属性。

总结：

通过使用 useEffect Hook 动态加载脚本，我们可以解决 React 应用中嵌入包含