这似乎是一个重复的问题。你可以在这里找到它。但我认为这不是 100% 清楚。所以，我在这篇博客文章中遇到过一次，它更清楚。

从谷歌你有这个：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-12121212"
      data-ad-slot="12121212"
      data-ad-format="auto"/>

<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

现在，在您的 React 应用程序中：

在 index.html 中包含以下代码段

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

创建你的react组件，如：

import React from 'react';

export default class AdComponent extends React.Component {
  componentDidMount () {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

render () {
    return (
        <ins className='adsbygoogle'
          style={{ display: 'block' }}
          data-ad-client='ca-pub-12121212'
          data-ad-slot='12121212'
          data-ad-format='auto' />
    );
  }
}

现在，要多次渲染它，您可以简单地ins用像map. 但是，我不完全理解您在这里的需求。

如果你想一次显示它们，那么像这样做你的地图。

如果您想随机化您的广告，请为您的组件添加一个状态和一个勾选状态，以便它可以每 X 秒重新渲染一次。在这个SO 答案中检查它

笔记：

1. 从您的 google 意义上添加，将class属性重命名为className
2. 更新style属性以这样包装：style={{ display: 'block' }}

@jpgbarbosa 的回答很棒。我将为具有多个页面的服务器端渲染 React 应用程序添加更好的实践，为了可扩展性，我建议您使用这种方法来保持代码库的可维护性。

export default class HomePage extends React.Component {
  componentDidMount() {
    const installGoogleAds = () => {
      const elem = document.createElement("script");
      elem.src =
        "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
      elem.async = true;
      elem.defer = true;
      document.body.insertBefore(elem, document.body.firstChild);
    };
    installGoogleAds();
    (adsbygoogle = window.adsbygoogle || []).push({});
  }

  render() {
    return (
      <ins className='adsbygoogle'
           style={{ display: 'block' }}
           data-ad-client='ca-pub-12121212'
           data-ad-slot='12121212'
           data-ad-format='auto' />
    );
  }
}

如果您在一个组件中加载了 Adsense 脚本并将其投放到另一个组件中，则在安装第二个组件时该脚本可能尚未加载。因此，window.adsbygoogle将被评估为 [] 并且不会加载广告。如果您同时使用自动广告和广告单元，这甚至会影响自动广告。

这是我实施的解决方案：

import React, { useEffect } from "react"

const SideAd = () => {
  useEffect(() => {
    const pushAd = () => {
      try {
        const adsbygoogle = window.adsbygoogle
        console.log({ adsbygoogle })
        adsbygoogle.push({})
      } catch (e) {
        console.error(e)
      }
    }

    let interval = setInterval(() => {
      // Check if Adsense script is loaded every 300ms
      if (window.adsbygoogle) {
        pushAd()
        // clear the interval once the ad is pushed so that function isn't called indefinitely
        clearInterval(interval)
      }
    }, 300)

    return () => {
      clearInterval(interval)
    }
  }, [])
  return (
    <ins
      className="adsbygoogle"
      style={{ display: "inline-block", width: "300px", height: "250px" }}
      data-ad-client="ca-pub-xxxxxx"
      data-ad-slot="xxxxx"
    ></ins>
  )
}

export default SideAd