React中解析含strong/em标签的HTML字符串失效，求解决方案

开发者阿泽

2026-7-13

问题解决：React中渲染HTML字符串时strong/em标签不生效

你的问题出在HTML字符串是HTML实体编码后的格式（比如用<代替<，>代替>），不管用dangerouslySetInnerHTML还是html-react-parser，都会把这些实体当成普通文本解析，而非实际的HTML标签，自然不会触发strong/em的样式。

解决步骤：先解码HTML实体

先把转义后的字符串还原成真实的HTML标签字符串，再进行渲染。可以用下面的解码函数：

function decodeHtmlEntities(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
}

修改方案1（dangerouslySetInnerHTML）：

const textHtml = '&lt;p&gt;Test&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Test&lt;/em&gt;&lt;/p&gt;';
const decodedHtml = decodeHtmlEntities(textHtml);

return (
  <div>
    <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />
  </div>
);

修改方案2（html-react-parser）：

import parse from 'html-react-parser';

const textHtml = '&lt;p&gt;Test&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Test&lt;/em&gt;&lt;/p&gt;';
const decodedHtml = decodeHtmlEntities(textHtml);

return (
  <div>
    <div>{parse(decodedHtml)}</div>
  </div>
);