Pipedrive 网络表单未在反应引导模式中加载答案

【问题标题】：Pipedrive webforms not loading inside react bootstrap modalPipedrive 网络表单未在反应引导模式中加载
【发布时间】：2021-05-03 01:25:24
【问题描述】：

我有一个 pipedrive 表单，需要在反应引导模式中呈现。但它根本不加载表单。它完全是空的。

<Modal size="xl" show={this.state.isOpen} onHide={this.closeModal} dialogClassName="contact-modal modal-xl">
      <Modal.Header closeButton>
        <Modal.Title>Contact Us</Modal.Title>
      </Modal.Header>
      <Modal.Body className="px-0">
        {
          this.state.isOpen &&
          <div className="pipedriveWebForms text-center" data-pd-webforms="https://webforms.pipedrive.com/f/33bqHAoXSWM37q2MD4RrpBN4sx7TNeZ7SfED403dZ90EBjtERc2JOptKx7juMQQrV">
                    <script src="https://webforms.pipedrive.com/f/loader" defer></script>
                </div>
            }
             
      </Modal.Body>
    </Modal>

这里是沙盒， https://codesandbox.io/s/amazing-albattani-lbth3?fontsize=14&hidenavigation=1&theme=dark

我尝试将脚本保存在 componentdidmount、componentwillmount 和 head 标签内。但它不起作用。在将其保持在模态之外的同时，该表单可以正常工作。我一直在试图找出为什么它不能在反应引导模式中工作。

我只是一个使用 react 的初学者，很难找到解决方案。

【问题讨论】：

您能创建一个这样的 sanbox 示例吗？这将更容易调试和回答工作的问题
@CodeManiac 我已经用沙盒链接更新了我的帖子。谢谢！

标签： javascript reactjs pipedrive-api

【解决方案1】：

问题是当你的模式关闭时，div 类 pipedriveWebForms 不会呈现。要修复它，您需要在每次打开模式时加载 JavaScript。

这就是我所做的：

  openModal = () => {
    this.setState({ isOpen: true });
    const script = document.createElement("script");
    script.src = "https://webforms.pipedrive.com/f/loader";
    script.defer = true;
    document.body.appendChild(script);
    this.setState({ pDriveScript: script });
  };
  closeModal = () => {
    this.setState({ isOpen: false });
    document.body.removeChild(this.state.pDriveScript);
  };

或者只使用embed 标签。

      <embed src="https://webforms.pipedrive.com/f/33bqHAoXSWM37q2MD4RrpBN4sx7TNeZ7SfED403dZ90EBjtERc2JOptKx7juMQQrV"/ >

【讨论】：