无后端ReactJS应用集成Google AdSense：代码正确性核查

现有代码存在的几个问题 #

• App.js语法错误：classname是原生HTML属性名，React中需使用驼峰式的className，且字符串未正确闭合（'app>应改为'app'）。
• 重复加载AdSense脚本：每次组件挂载都会新建<script>标签加载adsbygoogle.js，会导致资源重复请求、控制台报错等问题。
• 脚本与初始化时机不匹配：异步脚本可能还未加载完成就执行广告初始化代码，导致广告无法正常渲染。
• DOM查询的潜在风险：直接用document.getElementById('ad-container')依赖DOM节点存在，虽当前逻辑可运行，但用React的useRef更符合组件化规范，避免意外问题。

修正后的AdComponent.js #

import React, { useEffect, useRef } from 'react';

const AdComponent = () => {
  const adContainerRef = useRef(null);

  useEffect(() => {
    // 检查脚本是否已加载，避免重复请求
    if (document.querySelector('script[src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"]')) {
      initAd();
      return;
    }

    // 创建并加载脚本，绑定加载完成回调
    const script = document.createElement('script');
    script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    script.async = true;
    script.onload = initAd;
    document.body.appendChild(script);

    // 广告初始化逻辑
    function initAd() {
      if (!adContainerRef.current) return;

      const ins = document.createElement('ins');
      ins.className = 'adsbygoogle';
      ins.style.display = 'block';
      ins.style.textAlign = 'center';
      ins.setAttribute('data-ad-client', '########'); // 替换为你的AdSense客户端ID
      ins.setAttribute('data-ad-slot', '########');   // 替换为你的广告位ID
      ins.setAttribute('data-ad-format', 'auto');
      adContainerRef.current.appendChild(ins);

      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }

    // 组件卸载时清理广告元素，避免内存泄漏
    return () => {
      if (adContainerRef.current) {
        adContainerRef.current.innerHTML = '';
      }
    };
  }, []);

  return <div ref={adContainerRef} />;
};

export default AdComponent;

修正后的App.js #

import AdComponent from './AdComponent';

function App() {
  return (
    <div className='app'>
       <AdComponent />
    </div>
  );
};

export default App;

补充说明 #

1. 务必将代码中的########替换为你在AdSense后台获取的真实客户端ID和广告位ID。
2. 确保你的网站已在AdSense后台完成域名验证，否则广告无法正常展示。
3. 若广告仍不显示，可查看浏览器控制台的AdSense相关报错，常见问题包括域名未验证、广告位ID错误、流量不符合AdSense政策等。

内容的提问来源于stack exchange，提问作者DIE SQUAD