React嵌入脚本标记无法样式化 [英] React Embedding Script Tag is Unstylable
问题描述
我打算将Surveymonkey调查嵌入到我的网站中(通过react进行).只是让它起作用是很麻烦的,但是最终这段代码起作用了:
I intend to embed a surveymonkey survey into my website (that is made with react). Just getting this to work was a hassle, but eventually this code worked:
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样式都无济于事.
This works in that the surveymonkey renders, but it's stuck at the top left corner of the screen - making most of the website completely unusable. Any css styling on the div "surveyMonkey" does nothing.
任何见识将不胜感激!谢谢.
Any insight would be appreciated! Thanks.
他们给我嵌入调查的代码如下:
The code they gave me to embed the survey looks like this:
<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>
推荐答案
感谢@ zero298&@Pambi,以下解决方案对我有用:
Thanks to @zero298 & @Pambi , the below solution worked for me:
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
这篇关于React嵌入脚本标记无法样式化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!