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

本文旨在解决 React 应用中嵌入包含 <script> 标签的 HTML 代码片段时，代码片段无法正常显示的问题。通过分析 React 使用 innerHTML 的特性，解释了 <script> 标签无法执行的原因，并提供使用 useEffect Hook 动态加载脚本的解决方案，确保嵌入的 HTML 代码片段能够正确渲染。

在 React 应用中，有时我们需要嵌入一些由第三方提供的 HTML 代码片段，例如捐赠按钮、广告代码等。这些代码片段通常包含 <script> 标签，用于加载外部 JavaScript 文件。然而，直接将这些代码片段嵌入到 React 组件中，可能会发现它们无法正常显示或执行。这是因为 React 使用 innerHTML 来更新 DOM 元素，而 innerHTML 会禁用 <script> 标签的执行。

问题原因：innerHTML 的限制

根据 HTML5 规范，通过 innerHTML 插入的 <script> 标签不会被执行。这是为了防止潜在的安全风险，例如跨站脚本攻击（XSS）。因此，当 React 使用 innerHTML 将包含 <script> 标签的 HTML 代码片段添加到 DOM 中时，<script> 标签会被忽略，导致相应的 JavaScript 代码无法执行。

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

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

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

以下是一个示例代码，展示如何使用 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 (
<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 Hook 接收两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载后执行，依赖数组用于指定回调函数依赖的状态或属性。当依赖数组中的任何一个值发生变化时，回调函数会重新执行。
2. 创建 <script> 标签: 使用 document.createElement(‘script’) 创建一个新的 <script> 标签。
3. 设置 src 属性: 设置 <script> 标签的 src 属性为外部 JavaScript 文件的 URL。
4. 设置 async 属性: 设置 <script> 标签的 async 属性为 true，使其异步加载。这可以避免阻塞页面的渲染。
5. 添加到 document.body: 将 <script> 标签添加到 document.body 中。
6. 清理函数: useEffect Hook 可以返回一个清理函数。清理函数会在组件卸载时执行，用于清理副作用操作。在本例中，清理函数用于移除动态添加的 <script> 标签，防止内存泄漏。
7. 空依赖数组 []: 将依赖数组设置为空数组 []，确保 useEffect Hook 只在组件挂载时执行一次。

注意事项：

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

总结：

通过使用 useEffect Hook 动态加载脚本，我们可以解决 React 应用中嵌入包含 <script> 标签的 HTML 代码片段无法正常显示的问题。这种方法可以确保外部 JavaScript 代码能够正确执行，从而实现所需的功能。在实际开发中，我们需要根据具体情况选择合适的解决方案，并注意潜在的风险。