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;

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

1 个答案: