我需要在我的 react
应用程序的页面底部添加一个 div
和 异步脚本
。
第一次尝试:
...
...
render() {
return (
<div>
<HeaderComponent />
<Notifications />
{children}
<FooterComponent />
<div
className="cc-banner-embed"
data-config="YmFja2MGVUJhY2tncm91bmQ9dHJ1ZQ==">
<script async src="https://banner.crowdcube.com/embed.js"></script>
</div>
</div>
);
}
第二次尝试:
...
// use lifecycle method to load script
componentDidMount() {
const s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://banner.crowdcube.com/embed.js";
this.instance.appendChild(s);
}
render() {
return (
<div>
<HeaderComponent />
<Notifications />
{children}
<FooterComponent />
<div
className="cc-banner-embed"
data-config="YmFja2MGVUJhY2tncm91bmQ9dHJ1ZQ=="
ref={el => (this.instance = el)}>
</div>
</div>
);
}
不幸的是,这两个方法都不起作用。如何让这个脚本文件异步加载。
编辑: 我的代码实际上是正确的,但是,在这种情况下,浏览器由于某种原因没有显示它(可能是 cookie 问题)。隐姓埋名就成功了。谢谢。
最佳答案
您可以尝试将脚本加载到您的 React 应用程序中
componentDidMount() {
const head = document.querySelector('head');
const script = document.createElement('script');
script.setAttribute('async',true);
script.setAttribute('src', 'https://banner.crowdcube.com/embed.js');
head.appendChild(script);
}
关于javascript - 如何向 React 添加异步脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60189360/