javascript - React 嵌入脚本标签是不可设置样式的

Question

我打算在我的网站中嵌入一个 surveymonkey 调查(这是用 React 制作的)。只是让它工作很麻烦，但最终这段代码起作用了:

let script = '<script>overly long link</script>';

let extractScript=/<script>(.+)<\/script>/gi.exec(script);
script = script.replace(extractScript[0], "");

class LeadForm extends React.Component {
    componentDidMount() {
        window.eval(extractScript[1]);
    }

    render() {
        return <div id="surveyMonkey" dangerouslySetInnerHTML={{__html: script}}/>;
    }
}

这在 surveymonkey 呈现时有效，但它停留在屏幕的左上角 - 使大部分网站完全无法使用。 div“surveyMonkey”上的任何 css 样式都不起作用。

任何见解将不胜感激!谢谢。

编辑:他们给我的嵌入调查的代码如下所示:

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd2n0EyEqR4XLlegogsUllbowWHzPdjEQtkQpaEg2LAEE.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com> Create your own user feedback survey </a>

Answer 1

感谢@zero298 和@Pambi，下面的解决方案对我有用:

class Survey extends React.Component {

  componentDidMount() {
    let el = document.createElement("script");
    el.src = "https://widget.surveymonkey.com/collect/website/js/tRaisffsdgj758hTBazgd4IXxGtDzETeaqu1iDMfLhIPM5OoAHZFDWBMRDTjq_2dfsd.js";
    document.body.appendChild(el);
}

    render() {
      return <Container className="pageContainer">
      <Row className="homeRow">
      <div id="smcx-sdk"></div>   
      </Row>
    </Container>
    }
  }
  export default Survey