Next.js/React：在动态内容页面插入Google Ads的最优方案

推荐方案：使用html-react-parser的转换功能 #

如果你的项目使用html-react-parser解析HTML（这是React生态中常用的HTML转React节点工具），可以通过它提供的transform选项，在解析过程中直接替换目标标签为自定义组件，完全不需要手动操作DOM。

步骤1：安装依赖（若未安装）

npm install html-react-parser

步骤2：修改Article组件代码

import parse, { domToReact } from 'html-react-parser';
import GoogleAdComponent from './GoogleAdComponent'; // 导入你的广告组件

function Article({ article }) {
  const parseOptions = {
    transform: (node) => {
      // 匹配class为google_ad的div标签
      if (node.type === 'tag' && node.name === 'div' && node.attribs.class === 'google_ad') {
        // 返回React组件替代原标签
        return <GoogleAdComponent />;
      }
      // 其他标签保持原有解析逻辑
      return domToReact(node.children, parseOptions);
    }
  };

  return (
    <PageContainer>
      <div className={styles.container}>
        {parse(article.content.html, parseOptions)}
      </div>
    </PageContainer>
  );
}

方案优势 #

• 完全遵循React声明式渲染逻辑，避免useEffect操作DOM带来的副作用
• 代码简洁，直接在解析阶段完成替换，无需后续DOM修改
• 依托成熟库的XSS防护，比手动处理HTML更安全

备选方案：手动解析DOM（不推荐） #

如果不想引入第三方库，也可以手动解析HTML字符串、遍历节点后替换，但这种方式需要处理大量边界情况，且存在XSS风险：

import { useState, useEffect } from 'react';
import GoogleAdComponent from './GoogleAdComponent';

function Article({ article }) {
  const [renderNodes, setRenderNodes] = useState([]);

  useEffect(() => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(article.content.html, 'text/html');
    const nodes = [];

    Array.from(doc.body.childNodes).forEach((el, index) => {
      if (el.tagName === 'DIV' && el.className === 'google_ad') {
        nodes.push(<GoogleAdComponent key={`ad-${index}`} />);
      } else {
        // 普通元素通过dangerouslySetInnerHTML渲染，存在XSS风险
        nodes.push(
          <div 
            key={`content-${index}`} 
            dangerouslySetInnerHTML={{ __html: el.outerHTML }} 
          />
        );
      }
    });

    setRenderNodes(nodes);
  }, [article.content.html]);

  return (
    <PageContainer>
      <div className={styles.container}>
        {renderNodes}
      </div>
    </PageContainer>
  );
}

总结 #

优先使用html-react-parser的transform方案，它更符合React的设计理念，同时兼顾安全性和开发效率。

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