IT技术 - 将 Marketo 表单添加到 Gatsby/JSX - 吾爱随笔录

我正在尝试将 Marketo 表单添加到 Gatsby 站点，但在将脚本注入页面的顺序方面遇到问题。

当我尝试渲染下面的组件时，我收到错误消息“ReferenceError: MktoForms2 is not defined”。

我尝试注释掉整个 useEffect 代码块，并且组件在没有表单的情况下可以很好地呈现到页面。然后当我将 "MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608)" 粘贴到控制台时，表单会按预期显示。

import React, { useEffect } from "react";
import Helmet from "react-helmet";

import "./form.scss";

const FormContactMkto = () => {
  useEffect(() => {
    MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608);
  }, []);

  return (
    <div>
      <Helmet>
        <script
          src="//app-sj11.marketo.com/js/forms2/js/forms2.min.js"
          type="text/javascript"
        />
      </Helmet>
      <form id="mktoForm_1608"></form>
    </div>
  );
};

export default FormContactMkto;

如何将此 Marketo 表单加载到 Gatsby 页面中？非常感谢任何帮助或建议！

import React, { useState, useEffect } from 'react'; const marketoScriptId = 'mktoForms'; export default function MarketoForm({ formId }) { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { if (!document.getElementById(marketoScriptId)) { loadScript(); } else { setIsLoaded(true); } }, []); useEffect(() => { isLoaded && window.MktoForms2.loadForm( '//app-XX.marketo.com', 'XXX-XXX-XXX', formId ); }, [isLoaded, formId]); const loadScript = () => { var s = document.createElement('script'); s.id = marketoScriptId; s.type = 'text/javascript'; s.async = true; s.src = '//app-XX.marketo.com/js/forms2/js/forms2.min.js'; s.onreadystatechange = function() { if (this.readyState === 'complete' || this.readyState === 'loaded') { setIsLoaded(true); } }; s.onload = () => setIsLoaded(true); document.getElementsByTagName('head')[0].appendChild(s); }; return ( <div> <form id={`mktoForm_${formId}`}></form> </div> ); }