React：如何将HTML标签渲染为格式化文本？ReactHtmlParser失效求助

问题分析 #

你的WebAPI返回的是双重转义后的HTML内容（比如 、<span>这类实体），而ReactHtmlParser只能解析原始HTML标签，直接传入会被当成普通文本渲染，无法识别为HTML元素。

解决方案 #

先将转义的HTML实体解码为原始HTML，再传入ReactHtmlParser解析，步骤如下：

1. 安装HTML实体解码库（推荐用成熟第三方库避免手写漏洞）

npm install html-entities

2. 在组件中实现解码+解析的流程

import ReactHtmlParser from 'react-html-parser';
import { decode } from 'html-entities';

// 封装处理函数
const renderFormattedHtml = (value) => {
  // 先解码HTML实体
  const decodedContent = decode(value);
  // 再解析为React元素
  return ReactHtmlParser(decodedContent);
};

// 渲染时调用
return <div>{renderFormattedHtml(item.value)}</div>;

原理说明 #

html-entities的decode方法会把所有HTML实体（如&转成&，<转成<）还原为原始字符，让ReactHtmlParser能正确识别HTML标签和样式，最终渲染出格式化的文本。

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