在 ReactJS 中从 AD 合作伙伴加载外部脚本

Question

我尝试在我的 react 网站上实现一个广告横幅，但我在渲染它时遇到了一些问题，因为它都在一个脚本标签中。

我试过这样做：

 <div dangerouslySetInnerHTML={{ __html: `
  <script type="text/javascript">
  atOptions = {
      'key' : '2b47258bf05eeeee270c27002378ce03',
      'format' : 'iframe',
      'height' : 250,
      'width' : 300,
      'params' : {}
  };
  document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.variouscreativeformats.com/2b47258bf05eeeee270c27002378ce03/invoke.js"></scr' + 'ipt>');
</script>
  ` }} />

但横幅未在网站上呈现（代码显示在检查器中）。

有什么简单的解决办法吗？

Answer 1

我在不使用 React 库的情况下使用 Google Maps 进行了类似的工作。因此，基于this tutorial，您可以尝试创建一个特定的广告组件，然后将该组件包含在您的应用中。

export default function AdViewer() {

  const atOptions = {
    key : '2b47258bf05eeeee270c27002378ce03',
    format : 'iframe',
    height : 250,
    width : 300,
    params : {}
  };

  useEffect(() => {
  
    const adEl = document.createElement('script');
  
    const type = location.protocol === 'https:' ? 's' : '';

    const href = `http${type}://www.variouscreativeformats.com/2b47258bf05eeeee270c27002378ce03/invoke.js`;

    adEl.src = href;
    
    window.document.body.appendChild(adEl);

  }, []);

}