在React组件中使用第三方嵌入代码

Question

我需要使用第三方嵌入代码来创建表单。我试图将其放在组件中，但显然没有起作用。我该如何设置它？

class Form extends Component {

  render() {

    return (
      <div>
        <div id="apply_form">
          <a name="form" id="formAnchor"></a>
          <script type="text/javascript" src="https://fs22.formsite.com/include/form/embedManager.js?1605047845"></script>
          <script type="text/javascript">
          EmbedManager.embed({
            key: "key",
            width: "100%",
            mobileResponsive: true
          });
          </script>
        </div>
      </div>
    );
  }
}

export default Form;

- Max T

Answer 1

很遗憾，除了在DOM中插入外部脚本，然后直接运行嵌入代码之外，没有一种真正干净的方法来做到这一点。

以下是我的操作步骤：

class Form extends Component {

  componentDidMount() {
    const script = document.createElement('script');
    script.setAttribute(
      'src', 
      'https://fs22.formsite.com/include/form/embedManager.js?1605047845');
    script.addEventListener('load', () => {
      EmbedManager.embed({
        key: "key",
        width: "100%",
        mobileResponsive: true
      });
    });
    document.body.appendChild(script);
  }

  render() {
    return (
      <div>
        <div id="apply_form">
          <a name="form" id="formAnchor"></a>
        </div>
      </div>
    );
  }
}

export default Form;

- Jacob

---

非常感谢！这个有用！并且解决了我的疑惑。 - Max T

我现在有一个问题 - 当我使用import将其添加到页面中，然后使用<Form/>时，控制台会显示错误 - Uncaught TypeError: Cannot read property 'parentNode' of null - 你有什么想法为什么会这样？ - Max T

不清楚，这可能是特定于此嵌入脚本的问题。您可以尝试交换 addEventListener 和 appendChild 行；也许它正在尝试读取 <script> 元素的 DOM 定位。 - Jacob