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

我需要将第三部分嵌入代码用于表单。我正在尝试将其返回到组件中，但显然无法正常工作。我该如何设置呢？

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;

最佳答案

不幸的是，没有一种真正干净的方法，只能深入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;

关于javascript - 在React组件中使用第三方嵌入代码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40983358/