在Gatsby React页面添加含<script>的原始HTML及嵌入代码的方法问询

如果你直接在React组件里粘贴原始HTML/JS代码，大概率会因为JSX语法规则（比如class要写成className、标签必须闭合等）报错，这里有两个靠谱的解决方法：

方法1：使用dangerouslySetInnerHTML插入完整代码块 #

这个是React官方提供的用于插入原始HTML/JS的方式，适合你有完整嵌入代码片段（比如带HTML结构+脚本的第三方组件）的场景。不过要注意：只在你完全信任的代码上使用这个方法，避免XSS攻击风险。

示例代码：

const ThirdPartyEmbed = () => {
  // 把你的原始嵌入代码放在这里，用模板字符串包裹
  const embedContent = `
    <div class="embed-box">
      <h3>第三方嵌入内容</h3>
      <script type="text/javascript">
        function initEmbed() {
          console.log('嵌入组件初始化');
        }
        initEmbed();
      </script>
    </div>
  `;

  return <div dangerouslySetInnerHTML={{ __html: embedContent }} />;
};

export default ThirdPartyEmbed;

方法2：动态创建脚本标签（更安全可控） #

如果只是需要加载外部脚本（比如某个第三方工具的JS文件），推荐用这种方式，它符合React的生命周期，还能在组件卸载时清理资源，避免内存泄漏。

示例代码：

import { useEffect } from 'react';

const LoadExternalScript = () => {
  useEffect(() => {
    // 创建脚本元素
    const script = document.createElement('script');
    script.src = 'https://your-external-script-url.com/script.js';
    script.async = true; // 异步加载不阻塞页面
    script.defer = true; // 可选，让脚本在DOM解析完成后执行

    // 脚本加载完成后的回调
    script.onload = () => {
      console.log('外部脚本加载成功，可以调用它的方法了');
    };

    // 把脚本添加到页面
    document.body.appendChild(script);

    // 组件卸载时移除脚本，清理资源
    return () => {
      document.body.removeChild(script);
    };
  }, []); // 空依赖数组确保只执行一次

  return null; // 这个组件不需要渲染可视化内容
};

export default LoadExternalScript;

之后你只需要在需要的页面或布局组件里导入这个组件即可。

Gatsby提供了几个核心文件和插件来帮你统一管理Google Analytics、图标字体、animate.js这类全局资源，不用在每个页面重复添加：

1. Google Analytics：用官方插件一键配置 #

直接用Gatsby官方的gatsby-plugin-google-gtag插件，它会自动在所有页面注入GA脚本，还支持GTM等工具。在gatsby-config.js里配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // 填入你的GA/GTM跟踪ID
        trackingIds: ["GA-XXXXXXXXX", "GTM-XXXXXXX"],
        // 可选配置：控制脚本加载时机、是否在开发环境禁用等
        gtagConfig: {
          anonymize_ip: true,
        },
      },
    },
  ],
};

2. 自定义脚本、图标字体、animate.js：用gatsby-ssr.js和gatsby-browser.js #

这两个文件是Gatsby的全局入口，用来处理服务器渲染和客户端的全局逻辑，非常适合注入全局资源：

示例：在gatsby-ssr.js中注入全局资源 #

exports.onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  // 在<head>中添加图标字体的CSS链接
  setHeadComponents([
    <link
      rel="stylesheet"
      href="https://your-icon-font-url.com/font.css"
      key="icon-font-css"
    />,
    // 还可以添加favicon、meta标签等
    <link rel="icon" href="/favicon.ico" key="site-favicon" />,
  ]);

  // 在</body>前添加animate.js这类脚本（避免阻塞页面渲染）
  setPostBodyComponents([
    <script
      src="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.js"
      key="animate-js"
    />,
  ]);
};

如果是本地资源，把文件放在项目根目录的static文件夹里，然后用/your-local-script.js这样的路径引用即可，Gatsby会自动把static里的文件复制到构建产物的根目录。

全局样式：在gatsby-browser.js中导入 #

如果有全局CSS文件（比如自定义的重置样式、图标字体的本地样式），直接在gatsby-browser.js里导入：

import './src/styles/global.css';

这样所有页面都会自动加载这个样式文件。

3. 依赖加载顺序：用插件简化管理 #

如果你的外部资源有依赖关系（比如某个脚本需要先加载jQuery），可以用gatsby-plugin-load-script插件来控制加载顺序，避免出现依赖未定义的错误。

内容的提问来源于stack exchange，提问作者Giannis Dallas