Javascript 如何添加异步脚本以作出反应

我需要在我的

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>
    );
  }

。。。
...
render（）{
返回(
{儿童}
);
}

第二次尝试：

  ...
  ...
  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>
    );
  }

。。。
//使用生命周期方法加载脚本
componentDidMount（）{
const s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 异步=真；
s、 src=”https://banner.crowdcube.com/embed.js";
此.instance.appendChild；
}
render（）{
返回(
{儿童}
（this.instance=el）}>
);
}

不幸的是，这两种方法都不起作用。如何让此脚本文件加载异步

编辑：
我的代码实际上是正确的，但是，在本例中，浏览器出于某种原因没有显示它（可能是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);
  }

谢谢你调查这件事，但是，这不起作用。如果它在
头部
，我可以使用React头盔包。这能回答你的问题吗？谢谢Juan，我编辑了我的问题，说我的代码是正确的&这个问题与cookie有关。谢谢