Gatsby 如何在盖茨比应用程序中集成车头时距变更日志？

下面是我想要粘贴的代码，我创建了html.js来添加第三方脚本，但无法修复它

变量HW_配置={
选择器：“.CHANGE_THIS”//CSS选择器插入徽章的位置
帐户：“帐户\ ID”//您的帐户ID，您可以在设置->小部件中找到它
};

要实现这一点，您有几种方法和变通方法。其中之一可能是创建一个名为

的独立组件，并将其导入到页面/组件中。您需要添加

组件didmount

生命周期，以确保加载DOM树。此外，在《盖茨比》中，您将需要检查，因为在您请求时，可能尚未创建

import React, { Component } from "react";

class HeadwayWidget extends Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
      let script, config;
       if(typeof document !== undefined){
        script = document.createElement("script");
        script.async = true;
        script.src = "https://cdn.headwayapp.co/widget.js";
        document.head.appendChild(script);
        config = {
            selector: ".headway-badge",
            account: "Your_Headway_ID"
        };
        script.onload = function() {
            window.Headway.init(config)
        }
      }
    }
    render(){
        return (
            <div>
                <span className="headway-badge" id="headway-badge">
                    What's New
                </span>
            </div>
        )
    }
}

import React，{Component}来自“React”；
类Headwidget扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
让脚本，配置；
if（文档类型！==未定义）{
脚本=document.createElement（“脚本”）；
script.async=true；
script.src=”https://cdn.headwayapp.co/widget.js";
document.head.appendChild（脚本）；
配置={
选择器：“.headway徽章”，
帐户：“您的车头时距ID”
};
script.onload=函数（）{
window.Headway.init（配置）
}
}
}
render（）{
返回(
有什么新鲜事吗
)
}
}

缺少关于您的试验的信息，但是在上面的方法中，您使用的是有状态组件。当然，您可以通过

useffect

钩子更改

componentDidMount

（使用空dep，

[]

）将其传输到无状态组件

import React, { Component } from "react";

class HeadwayWidget extends Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
      let script, config;
       if(typeof document !== undefined){
        script = document.createElement("script");
        script.async = true;
        script.src = "https://cdn.headwayapp.co/widget.js";
        document.head.appendChild(script);
        config = {
            selector: ".headway-badge",
            account: "Your_Headway_ID"
        };
        script.onload = function() {
            window.Headway.init(config)
        }
      }
    }
    render(){
        return (
            <div>
                <span className="headway-badge" id="headway-badge">
                    What's New
                </span>
            </div>
        )
    }
}