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

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;