本文旨在解决 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;
代码解释：
- useEffect Hook: useEffect Hook 接收两个参数：一个回调函数和一个依赖数组。回调函数会在组件挂载后执行，依赖数组用于指定回调函数依赖的状态或属性。当依赖数组中的任何一个值发生变化时，回调函数会重新执行。
- 创建 <script> 标签: 使用 document.createElement(‘script’) 创建一个新的 <script> 标签。
- 设置 src 属性: 设置 <script> 标签的 src 属性为外部 JavaScript 文件的 URL。
- 设置 async 属性: 设置 <script> 标签的 async 属性为 true，使其异步加载。这可以避免阻塞页面的渲染。
- 添加到 document.body: 将 <script> 标签添加到 document.body 中。
- 清理函数: useEffect Hook 可以返回一个清理函数。清理函数会在组件卸载时执行，用于清理副作用操作。在本例中，清理函数用于移除动态添加的 <script> 标签，防止内存泄漏。
- 空依赖数组 []: 将依赖数组设置为空数组 []，确保 useEffect Hook 只在组件挂载时执行一次。
注意事项：
- 确保外部 JavaScript 文件的 URL 是正确的。
- 如果外部 JavaScript 文件依赖于其他 JavaScript 文件，请确保它们也都被正确加载。
- 如果外部 JavaScript 文件修改了 DOM 结构，请确保 React 组件能够正确处理这些修改。
- 使用 async 属性可以避免阻塞页面的渲染，但可能会导致 JavaScript 代码执行顺序不确定。如果 JavaScript 代码的执行顺序很重要，请不要使用 async 属性。
总结：
通过使用 useEffect Hook 动态加载脚本，我们可以解决 React 应用中嵌入包含 <script> 标签的 HTML 代码片段无法正常显示的问题。这种方法可以确保外部 JavaScript 代码能够正确执行，从而实现所需的功能。在实际开发中，我们需要根据具体情况选择合适的解决方案，并注意潜在的风险。
