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

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

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

问题分析

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

解决方案：使用 useEffect Hook

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

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

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

创建 <script> 元素：</script> 使用 document.createElement('script') 创建一个新的 script 元素。
设置 src 属性： 将脚本的 URL 设置为 script 元素的 src 属性。
设置 async 属性 (可选)： 如果脚本可以异步加载，设置 async 属性为 true。这可以防止脚本阻塞页面的渲染。
将脚本添加到 DOM： 使用 document.body.appendChild(script) 将 script 元素添加到文档的中。
清理副作用： 在 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);: 将脚本添加到中。
return () => { document.body.removeChild(script); };: 返回一个清理函数，在组件卸载时移除脚本。
: 这是 GoFundMe 提供的 HTML 代码，用于显示捐赠按钮。