如何解决如何在 react.js 中包含带有“new Class({})”init 的 <script>?
我有一个类似的脚本:
<div id="widget"></div>
<script
type="text/javascript"
src="https://widget.io/w.js"
></script>
<script type="text/javascript">
new Widget({
width: 768,height: 525,containerId: "widget",partner_id: "default",})
</script>
我需要在 React 组件中触发。
我已经使用他们的示例看到了与此相关的其他问题及其工作 - 除了 new Widget({})
参数。
React 说 Widget 没有定义,因为它不是从任何地方导入的。
我使用 react 头盔来添加脚本标签,所以我的 render()
函数如下所示:
render() {
return (
<div id="wert-widget">
<Helmet>
<div id="widget"></div>
<script
type="text/javascript"
src="https://widget.io/w.js"
></script>
<script type="text/javascript">
{
new Widget({
width: 768,})
}
</script>
</Helmet>
</div>
);
}
但是 react 抛出一个错误,说 Widget 没有定义。
在 componentDidMount 函数中使用 setInnerHTML 也不起作用,因为它只是将新的 Widget 对象设置为字符串而不初始化小部件。
你会如何反应?
直接将它添加到 HTML index.html 没有帮助,因为当用户单击按钮时,我们只需要在一个组件上使用这个小部件。
解决方法
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
element.appendChild(script);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。