HTML直接显示与React dangerouslySetInnerHTML渲染差异及解决方案

问题描述 #

我有一段原始HTML想要在React组件中渲染。直接打开该HTML文件时显示正常，但使用React的dangerouslySetInnerHTML渲染相同HTML时，显示效果发生了变化。

示例代码 #

const root = ReactDOM.createRoot(document.getElementById('root'));

txt = '<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div style="position:absolute; border: textbox 1px solid; writing-mode:lr-tb; left:412px; top:221px; width:106px; height:81px;"><span style="font-family: Helvetica; font-size:8px">Name <br>Forename <br>01.01.1901 <br>female <br>12345 <br>DD.MM.YYYY  <br>DD.MM.YYYY <br>8765432 <br>DD.MM.YYYY <br></span></div><span style="position:absolute; border: gray 1px solid; left:0px; top:50px; width:595px; height:841px;"></span><div style="position:absolute; top:50px;"><a name="1">Page 1</a></div><span style="position:absolute; border: black 1px solid; left:328px; top:214px; width:207px; height:94px;"></span></body></html>'

root.render(<div dangerouslySetInnerHTML={{__html: txt}} />);

渲染效果对比 #

• React渲染效果：
• 直接打开HTML文件效果：

核心疑问 #

请问为何两者显示效果存在差异？如何让React正确渲染该HTML？

补充说明：正如评论中提到的，给span添加display: block可修复显示问题，但我的问题是：**如何在不修改原HTML的前提下，仅通过React实现修复？**因为示例仅是一个大型HTML文件的一部分，其中包含大量span，且并非所有span都需要设置display: block。

解决方案 #

一、差异原因 #

直接打开HTML文件时，浏览器将其作为完整文档解析，<html>、<head>、<body>标签会被正常处理；但通过dangerouslySetInnerHTML渲染时，这段HTML是被插入到已有的页面DOM树中，浏览器会自动忽略嵌套的<html>、<head>、<body>标签，仅保留内部的元素。

原HTML中带换行的<span>在完整文档中能正常排版，是因为它处于顶级<body>下的绝对定位容器中；插入到React根节点后，元素的上下文样式被破坏，再加上<span>是行内元素，默认不会自动换行撑满容器，最终导致内容溢出、排版错乱。

二、不修改原HTML的修复方案 #

1. 作用域CSS修正样式

给React渲染的容器添加自定义类名，通过CSS选择器精准定位需要修复的<span>，仅为这些元素设置display: block：

/* 自定义容器类名的样式 */
.react-html-wrapper div[style*="position:absolute"] span {
  display: block;
}

对应的React代码：

const root = ReactDOM.createRoot(document.getElementById('root'));

const txt = '<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div style="position:absolute; border: textbox 1px solid; writing-mode:lr-tb; left:412px; top:221px; width:106px; height:81px;"><span style="font-family: Helvetica; font-size:8px">Name <br>Forename <br>01.01.1901 <br>female <br>12345 <br>DD.MM.YYYY  <br>DD.MM.YYYY <br>8765432 <br>DD.MM.YYYY <br></span></div><span style="position:absolute; border: gray 1px solid; left:0px; top:50px; width:595px; height:841px;"></span><div style="position:absolute; top:50px;"><a name="1">Page 1</a></div><span style="position:absolute; border: black 1px solid; left:328px; top:214px; width:207px; height:94px;"></span></body></html>'

root.render(
  <div className="react-html-wrapper" dangerouslySetInnerHTML={{__html: txt}} />
);

该方案通过样式选择器精准匹配目标元素，不会影响其他不需要修改的<span>。

2. React生命周期钩子动态修改DOM

如果需要更灵活的控制（比如根据条件判断是否修改），可以使用useEffect在组件渲染完成后，动态查找并修改目标元素的样式：

import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';

const HtmlRenderer = ({ html }) => {
  const wrapperRef = useRef(null);

  useEffect(() => {
    if (wrapperRef.current) {
      // 筛选出处于绝对定位div下的span元素
      const targetSpans = wrapperRef.current.querySelectorAll('div[style*="position:absolute"] span');
      targetSpans.forEach(span => {
        span.style.display = 'block';
      });
    }
  }, [html]);

  return (
    <div ref={wrapperRef} dangerouslySetInnerHTML={{__html: html}} />
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
const txt = '&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;position:absolute; border: textbox 1px solid; writing-mode:lr-tb; left:412px; top:221px; width:106px; height:81px;&quot;&gt;&lt;span style=&quot;font-family: Helvetica; font-size:8px&quot;&gt;Name &lt;br&gt;Forename &lt;br&gt;01.01.1901 &lt;br&gt;female &lt;br&gt;12345 &lt;br&gt;DD.MM.YYYY  &lt;br&gt;DD.MM.YYYY &lt;br&gt;8765432 &lt;br&gt;DD.MM.YYYY &lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;position:absolute; border: gray 1px solid; left:0px; top:50px; width:595px; height:841px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;position:absolute; top:50px;&quot;&gt;&lt;a name=&quot;1&quot;&gt;Page 1&lt;/a&gt;&lt;/div&gt;&lt;span style=&quot;position:absolute; border: black 1px solid; left:328px; top:214px; width:207px; height:94px;&quot;&gt;&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;'

root.render(<HtmlRenderer html={txt} />);

该方案通过JS逻辑精确筛选目标元素，适合复杂场景下的样式控制。

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