Мне нужно добавить async script
div
& async script
внизу страницы в моем приложении react
.
1-я попытка:
...
...
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>
);
}
2-я попытка:
...
// 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). Вход в инкогнито сделал свое дело. Спасибо.
Всего 1 ответ
Вы можете попробовать это, чтобы загрузить ваш скрипт в ваше приложение реакции
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);
}