React中使用dangerouslySetInnerHTML时Adsense广告无法显示

DevOps 小满

2026-7-17

解决dangerouslySetInnerHTML中Adsense广告不显示的问题

核心原因

React的dangerouslySetInnerHTML不会执行插入的<script>标签，你嵌入的Adsense脚本无法被加载和执行，这是广告不显示的根本原因。

具体解决步骤

1. 全局提前加载Adsense主脚本

不要把Adsense的主脚本放在动态HTML片段里，直接在React应用的public/index.html的<head>中添加：

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7107200228987000" crossorigin="anonymous"></script>

或者在应用入口文件（如index.js）中通过动态创建脚本的方式加载，确保脚本全局可用。

2. 简化动态HTML片段

移除Chapter1.html片段里的重复脚本，只保留广告容器标签：

<p>The hour’s just 9 o’clock.</p>
<p>I should do laundry, clean and spend my time in the morning relaxing.</p>
<p></p>
<ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article"
     data-ad-format="fluid" data-ad-client="ca-pub-7107200228987000" data-ad-slot="9551463795"></ins>
<h3>Part 1</h3>
<p>Inside Keyaki Mall in the forenoon, the atmosphere of Christmas Eve was in full swing.</p>
<p>Inside the mall was decorated with even more gaudy ornaments than at the entrance.</p>

3. 组件内手动触发广告初始化

在渲染动态内容的React组件中，用useEffect监听内容变化，手动调用Adsense初始化方法：

import { useEffect, useRef } from 'react';

function ArticleViewer({ dynamicHtml }) {
  const contentRef = useRef(null);

  useEffect(() => {
    if (!window.adsbygoogle) return;
    
    // 找到所有广告容器并初始化
    const adElements = contentRef.current?.querySelectorAll('.adsbygoogle');
    adElements?.forEach(() => window.adsbygoogle.push({}));
  }, [dynamicHtml]);

  return (
    <div ref={contentRef} dangerouslySetInnerHTML={{ __html: dynamicHtml }} />
  );
}