2

我能够让 Hubspot 表单作为 Gatsby 中的一个组件工作，但我希望能够为每页设置 formId。我尝试在我的组件中设置道具，但没有成功。这是表单工作的页面示例，代码如下，已删除我的门户 ID。

import React from "react";

class HubspotBrochureDownload extends React.Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: "XXXXXX",
          formId: "1152aa7a-835d-410d-9462-08e2ddd226d8",
          target: "#hubspotForm"
        });
      }
    });
  }

  render() {
    return (
      <div>
        <div id="hubspotForm"></div>
      </div>
    );
  }
}

export default HubspotBrochureDownload;

我试过删除我的 formID 并放置道具。我找到了这个componentDidUpdate的例子，但没有任何运气

4

1 回答 1

1

您可以传递道具，以便表单接受不同的 id。在 componentDidMount(props) 内部传递的 prop，应该知道 prop 在特定上下文中以便获取它的值，所以你可以做的是在 componentDidMount(props) 范围内使用 this.props。这是我找到的解决方案：-

import React from "react";

class HubspotBrochureDownload extends React.Component {
  componentDidMount(props) {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: `${this.props.portalID}`,
          formId: "1152aa7a-835d-410d-9462-08e2ddd226d8", //also you can do fromID: `${this.props.formID}`
          target: "#hubspotForm"
        });
      }
    });
  }

  render() {
    return (
      <div>
        <div id="hubspotForm"></div>
      </div>
    );
  }
}

export default HubspotBrochureDownload;

并将其导入另一个文件

import HubspotBrochureDownload from '../components/hubspot';

const MyComponent = props => {

 <HubspotBrochureDownload portalID="xxxxx" />
  // rest of your component
}
于 2020-04-06T11:57:56.887 回答