Javascript React嵌入脚本标记是不可伸缩的

我打算将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}}/>;
    }
}

let script='链接过长'；
让extractScript=/（.+）/gi.exec（script）；
script=script.replace（提取脚本[0]，“”）；
类LeadForm扩展了React.Component{
componentDidMount（）{
eval（extractScript[1]）；
}
render（）{
返回；
}
}

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

class LeadForm extends React.Component {
    componentDidMount() {
        let el = document.createElement("script");
        el.src = "SOME_SCRIPT_SRC";
        document.body.appendChild(el);
    }

    render() {
        return <div id="surveyMonkey"/>;
    }
}

import * as React from 'react';
import { Helmet } from 'react-helmet';

class Survey extends React.Component {
    render() {
        return(
            <div id="smcx-sdk"></div>
            <Helmet>
                <script 
                    src="https://widget.surveymonkey.com/collect/website/js/TOKEN.js" 
                    type="text/javascript"
                />
            </Helmet>
        )
    }
}

（函数（t，e，s，n）{var o，a，c；t.SMCX=t.SMCX | |【】，e.getElementById（n）|（o=e.getElementsByTagName，a=o[o.length-1]，c=e.createElement（s），c.type=“text/javascript”，c.async=！0，c.id=n，c.src=[“https:=====”位置协议？“/”：“http:/”，“widget.surveymonkey.com/collect/website/js/traietqnlgj758htbazgd2n0eyeqr4xlegogsullbowwhzpdjeqtkqpage2laee.js”].join（“”，a.parentNode.insertBefore（c，a））（窗口，文档，“脚本”，“smcx sdk”）；

按照您可以在此处找到的文档进行操作：。看起来您还可以在此处找到其他文档：

不要使用

eval

，我也不会使用

DangerouslySetinerHTML

，因为您不需要它。它在函数名中有“dangerously”这一事实应该会让您暂停

找到提供给您的

标记的

src

属性，并在下面的代码中使用它

然后像这样做：

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

class LeadForm extends React.Component {
    componentDidMount() {
        let el = document.createElement("script");
        el.src = "SOME_SCRIPT_SRC";
        document.body.appendChild(el);
    }

    render() {
        return <div id="surveyMonkey"/>;
    }
}

import * as React from 'react';
import { Helmet } from 'react-helmet';

class Survey extends React.Component {
    render() {
        return(
            <div id="smcx-sdk"></div>
            <Helmet>
                <script 
                    src="https://widget.surveymonkey.com/collect/website/js/TOKEN.js" 
                    type="text/javascript"
                />
            </Helmet>
        )
    }
}

class LeadForm扩展了React.Component{
componentDidMount（）{
设el=document.createElement（“脚本”）；
el.src=“SOME\u SCRIPT\u src”；
文件.正文.附件（el）；
}
render（）{
返回；
}
}

我在React网站上的Embedded Surveymonkey中添加了

我想要放置调查的地方，从而使其工作起来

结果是这样的：

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

class LeadForm extends React.Component {
    componentDidMount() {
        let el = document.createElement("script");
        el.src = "SOME_SCRIPT_SRC";
        document.body.appendChild(el);
    }

    render() {
        return <div id="surveyMonkey"/>;
    }
}

import * as React from 'react';
import { Helmet } from 'react-helmet';

class Survey extends React.Component {
    render() {
        return(
            <div id="smcx-sdk"></div>
            <Helmet>
                <script 
                    src="https://widget.surveymonkey.com/collect/website/js/TOKEN.js" 
                    type="text/javascript"
                />
            </Helmet>
        )
    }
}

import*as React from'React'；
从“react Helmet”导入{Helmet}；
类调查扩展了React.Component{
render（）{
返回(
)
}
}

---

带有令牌的url取自他们提供的脚本。可以使用CSS进行一些样式设置。

多亏了@zero298&@Pambi，以下解决方案适合我：

类调查扩展了React.Component{
componentDidMount（）{
设el=document.createElement（“脚本”）；
el.src=”https://widget.surveymonkey.com/collect/website/js/tRaisffsdgj758hTBazgd4IXxGtDzETeaqu1iDMfLhIPM5OoAHZFDWBMRDTjq_2dfsd.js";
文件.正文.附件（el）；
}
render（）{
返回
}
}
导出默认调查

到目前为止，嵌入代码所做的是用调查猴子src URL附加iframe

在简单HTML中嵌入脚本

检查iframe标签是否正确

您将发现类似以下代码

复制带有属性的iframe标记，并放置在任何需要的位置

---

你确定你应该这样在你的页面上嵌入调查吗？文档说要这样添加：。换句话说，不要按你的方式设置脚本主体。我尝试过这样做，但不幸的是，他们的教程可能已经过时，因为他们给我的代码看起来大不相同。他们让我加载了更多的javascript.Ch查看我的原始帖子，看看他们给我的代码。我尝试了你的建议，src是“widget.surveymonkey…LAEE.js”“但是运气不好。@ConnorW，你找到更多关于这个的信息了吗？”？我正试图找到一个类似的解决方案。Thx。@JCGarcia不幸的是，我找不到解决这个确切问题的方法，而是解决了它。祝你好运@zero298在哪里您可以知道如何检测用户何时完成调查？