Javascript Pipedrive webforms未在react引导模式内加载

我有一个pipedrive表单，需要在react引导模式中进行渲染。但它只是不加载表单。它完全是空的

<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>

联系我们
{
这个州&&
}

这是沙箱，

我尝试将脚本保存在componentdidmount、componentwillmount和head标记中。但它不起作用。当保持它在模态之外时，表单工作。我一直在试图找出为什么它在react引导模式中不起作用

---

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

问题是当关闭模式时，类

pipedriveWebForms的
div
未呈现。要修复它，您需要在每次打开modal时加载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"/ >


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