如何在反应中使用Taboola

如何解决如何在反应中使用Taboola

我正在开发应具有taboola内容的react应用。 当然，我已经嵌入了taboola的代码。

<script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({ article: 'auto' });
    !function (e,f,u,i) {
      if (!document.getElementById(i)) {
        e.async = 1;
        e.src = u;
        e.id = i;
        f.parentNode.insertBefore(e,f);
      }
    }(document.createElement('script'),document.getElementsByTagName('script')[0],'//cdn.taboola.com/libtrc/.../loader.js','tb_loader_script');
    if (window.performance && typeof window.performance.mark == 'function') { window.performance.mark('tbl_ic'); }
  </script>

<div id="taboola-below-article-thumbnails"></div>
  <script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({
      mode: 'thumbnails-a',container: 'taboola-below-article-thumbnails',placement: 'Below Article Thumbnails',target_type: 'mix'
    });
  </script>

<script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({ flush: true });
  </script>

我在本地html脚本中测试了此代码。 而且效果很好。 但是，当我尝试使用它来响应环境时，有时它不会显示内容。

这是我的反应代码

class TaboolaContainer extends React.Component {
  applyTaboola = () => {
    if (document.getElementById("taboola-below-article-thumbnails").innerHTML.length) return;
    window._taboola = window._taboola || [];
    window._taboola.push({
      mode: "thumbnails-a",container: "taboola-below-article-thumbnails",placement: "Below Article Thumbnails",target_type: 'mix'

    });
    window._taboola.push({ flush: true });
  }

  componentDidMount = () => {
    this.applyTaboola();
  }

  render() {
    return (
      <div className="taboola-section">
        <div id="taboola-below-article-thumbnails"></div>
      </div>
    )
  }
}

如何使用taboola来更有效地进行反应？