React中useEffect加载HTML内容时重复触发与更新失效问题求助

问题说明 #

从服务器加载HTML格式的文章内容并展示，需让网页解析HTML而非纯文本。由于设置innerHTML必须在DOM挂载后操作，否则getElementById会返回null。当前临时方案存在两个问题：

• 首次加载时handleContentLoaded触发两次
• 移除判断语句后，点击其他文章查看按钮时函数不触发，内容无法更新

解决方案 #

方案1：使用React官方的dangerouslySetInnerHTML（推荐） #

这是React官方提供的设置innerHTML的方式，无需手动监听DOM事件，自动适配组件生命周期：

function ArticleContent({ htmlContent }) {
  return (
    <div 
      dangerouslySetInnerHTML={{ __html: htmlContent }}
    ></div>
  );
}

• 原理：React会在组件挂载/更新时自动处理DOM渲染，无需手动调用getElementById，天然避免DOM未就绪的问题
• 切换文章时，只要htmlContent变化，组件就会自动重新渲染更新内容

方案2：结合useRef与useEffect手动操作DOM #

如果需要额外的DOM操作逻辑，可使用ref替代全局DOM查询，通过useEffect监听内容变化：

import { useRef, useEffect } from 'react';

function ArticleContent({ htmlContent }) {
  const contentRef = useRef(null);

  useEffect(() => {
    // 仅当ref存在且内容有效时更新
    if (contentRef.current && htmlContent) {
      contentRef.current.innerHTML = htmlContent;
    }
  }, [htmlContent]); // 依赖内容变量，内容变化时自动触发

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

• 优势：避免了DOMContentLoaded事件重复触发的问题，仅在文章内容变化时执行更新逻辑，首次加载和切换文章都能正常触发

安全注意事项 #

直接渲染HTML存在XSS攻击风险，若内容来自不可信来源，需用净化库（如DOMPurify）处理：

import DOMPurify from 'dompurify';

// 方案1中使用：
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlContent) }}></div>

// 方案2中使用：
contentRef.current.innerHTML = DOMPurify.sanitize(htmlContent);

补充参考内容（原英文文章核心要点） #

React中渲染静态HTML的常用方式：

• 优先使用dangerouslySetInnerHTML，符合React生命周期机制，减少手动DOM操作
• 需额外DOM交互时，用useRef+useEffect组合，避免全局DOM查询的问题
• 所有外部来源的HTML内容必须经过XSS净化处理，保障页面安全

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