Как добавить асинхронный скрипт в React

Мне нужно добавить 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);
  }

Есть идеи?

10000