脚本仅适用于 Gatsby/React 中的页面刷新

Question

我正在尝试在我的 Gatsby 网站中使用来自 Tock 的脚本，该脚本将“预订”按钮转换为小部件。

我尝试了这里建议的许多不同方法来完成这项工作，包括this answer.中列出的方法

如果我将脚本放入如下所示的组件中或 html.js 中，则代码有效，但前提是我刷新页面。如果我从另一个页面导航到该页面，它不起作用。

如果我放置在外部 JS 文件中，我会遇到编译错误。

我认为应该简单的是提供令人难以置信的挑战性，因此非常感谢任何帮助！谢谢

class ReserveTock extends React.Component {

    render() {
        return (
            <>
                <script dangerouslySetInnerHTML={{
                __html:`
                !function(t,o,c,k){if(!t.tock){var e=t.tock=function(){e.callMethod?
                e.callMethod.apply(e,arguments):e.queue.push(arguments)};t._tock||(t._tock=e),
                e.push=e,e.loaded=!0,e.version='1.0',e.queue=[];var f=o.createElement(c);f.async=!0,
                f.src=k;var g=o.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g)}}(
                window,document,'script','https://www.exploretock.com/tock.js');
                tock('init', 'websitename');
                `}}
                />

                <a className = {"btn " + this.props.buttonColor + ' ' + this.props.className}
                   href="https://www.exploretock.com/websitename"
                   data-tock-reserve="true"
                   data-tock-experience={this.props.experienceTockId}
                >
                    Reserve
                </a>
            </>
        )
    }
}

Answer 1

根据我的经验：加载到页面中的第三方脚本需要在 HTML 中的位置尽可能高。所以把 script 标签直接放在 HTML 头部，不要用 JavaScript 注入 :)