React 中嵌入 HTML 代码无法显示的问题及解决方案-html教程-PHP中文网

React 中嵌入 HTML 代码无法显示的问题及解决方案

心靈之曲

发布： 2025-08-22 21:34:27

原创

1053人浏览过

react 中嵌入 html 代码无法显示的问题及解决方案

本文档旨在解决 React 应用中嵌入 HTML 代码（特别是包含 <script> 标签的代码）无法正常显示的问题。我们将探讨 React 如何处理 HTML 元素，并提供使用 useEffect Hook 安全有效地嵌入外部脚本的解决方案，确保脚本正确执行，实现预期的页面效果。

问题分析

在 React 应用中，直接将包含 <script> 标签的 HTML 代码嵌入到组件中，通常无法正常执行。这是因为 React 使用 innerHTML 来更新 DOM，而 HTML5 规范明确指出通过 innerHTML 插入的 <script> 标签不会被执行，出于安全考虑，避免潜在的恶意脚本注入。

解决方案：使用 useEffect Hook

为了解决这个问题，推荐使用 React 的 useEffect Hook 来动态地创建和插入 <script> 标签。useEffect 允许你在组件挂载后执行副作用操作，例如操作 DOM。

以下是如何使用 useEffect 嵌入外部脚本的步骤：

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

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

创建 <script> 元素： 使用 document.createElement('script') 创建一个新的 script 元素。
设置 src 属性： 将脚本的 URL 设置为 script 元素的 src 属性。
设置 async 属性 (可选)： 如果脚本可以异步加载，设置 async 属性为 true。这可以防止脚本阻塞页面的渲染。
将脚本添加到 DOM： 使用 document.body.appendChild(script) 将 script 元素添加到文档的 <body> 中。
清理副作用： 在 useEffect 的返回函数中，使用 document.body.removeChild(script) 在组件卸载时移除 script 元素，防止内存泄漏。

示例代码：

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

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  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(() => { ... }, []): useEffect Hook 接受一个回调函数和一个依赖项数组作为参数。空数组 [] 确保该 effect 只在组件挂载时执行一次，卸载时清理。
const script = document.createElement('script');: 创建一个 script 元素。
script.src = "https://www.gofundme.com/static/js/embed.js";: 设置脚本的 URL。
script.async = true;: 允许脚本异步加载。
document.body.appendChild(script);: 将脚本添加到 <body> 中。
return () => { document.body.removeChild(script); };: 返回一个清理函数，在组件卸载时移除脚本。
<div className="gfm-embed" data-url="https://www.gofundme.com/f/theyre-the-real-victims/widget/large/"></div>: 这是 GoFundMe 提供的 HTML 代码，用于显示捐赠按钮。