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

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相关问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.