React 中嵌入 HTML 代码无法显示的问题及解决方案-小浪学习网

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 代码，用于显示捐赠按钮。