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

本文旨在解决 React 应用中嵌入包含 <script> 标签的 HTML 代码片段时无法正常显示的问题。通常情况下，直接在 React 组件中使用 innerHTML 插入脚本会导致脚本无法执行。本文将介绍使用 useEffect Hook 安全有效地在 React 应用中嵌入外部脚本的方法，并提供示例代码和注意事项，确保嵌入的 HTML 代码片段能够正确渲染。

使用 useEffect Hook 加载外部脚本

在 React 应用中，直接使用 innerHTML 添加包含 <script> 标签的 HTML 代码片段，脚本通常不会执行。这是因为 React 使用虚拟 DOM，并且通过 innerHTML 插入的脚本会被浏览器阻止执行，以防止潜在的安全问题。

为了解决这个问题，可以使用 useEffect Hook 来动态加载外部脚本。useEffect 允许你在组件挂载后执行副作用操作，例如加载外部资源。

示例代码：

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

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;

代码解释：

1. useEffect Hook: useEffect(() => { … }, []) 确保代码只在组件首次挂载时执行一次。空依赖数组 [] 是关键，它告诉 React 只在组件挂载时运行 effect。
2. 创建 <script> 元素: document.createElement(‘script’) 创建一个新的 <script> 元素。
3. 设置 src 属性: script.src = “https://www.gofundme.com/static/js/embed.js” 设置脚本的 URL。
4. 设置 async 属性: script.async = true 使脚本异步加载，不会阻塞页面的渲染。
5. 将脚本添加到 document.body: document.body.appendChild(script) 将脚本添加到文档的 body 中，触发脚本的加载和执行。
6. 清理函数: return () => { document.body.removeChild(script); } 返回一个清理函数，在组件卸载时执行。这个函数从 document.body 中移除脚本，防止内存泄漏和潜在的问题。
7. HTML 结构: <div className=”gfm-embed” data-url=”https://www.gofundme.com/f/theyre-the-real-victims/widget/large/”></div> 是 GoFundMe 提供的用于嵌入捐赠按钮的 HTML 结构。

注意事项：

• 清理函数： 务必在 useEffect 中提供清理函数，以在组件卸载时移除动态添加的脚本。否则，可能会导致内存泄漏和意外的行为。
• 异步加载： 使用 async 属性可以避免脚本加载阻塞页面的渲染，提高用户体验。
• 错误处理： 在实际应用中，建议添加错误处理机制，以处理脚本加载失败的情况。
• 依赖管理： 如果脚本的加载依赖于某些状态或 props，需要将这些依赖项添加到 useEffect 的依赖数组中。
• 安全问题： 请确保加载的外部脚本来源可靠，以避免潜在的安全风险。

总结：

通过使用 useEffect Hook，可以安全有效地在 React 应用中嵌入外部脚本，从而实现更复杂的功能和集成。记住要清理副作用，并注意脚本的来源和潜在的安全问题。这种方法避免了直接使用 innerHTML 带来的问题，并提供了更灵活和可控的脚本加载方式。