ReactJS中如何让服务器返回的转义文本正常显示？

服务器返回的文本包含HTML实体（比如<p>、'这类转义字符），直接在JSX中插入时，React会默认把这些内容当作文本原样显示，无法解析成对应的HTML标签或正常字符。可以用以下两种方法解决：

方法一：使用dangerouslySetInnerHTML（适合需要渲染HTML标签的场景） #

这个属性会让React直接解析并渲染HTML内容，同时自动解析所有HTML实体。修改你的组件代码如下：

const Text = () => {
  return (
    <div 
      className={styles.text}
      dangerouslySetInnerHTML={{ __html: data.text }}
    />
  )
}

注意：这个属性命名带"dangerously"是因为如果服务器返回的内容不可信（比如包含恶意脚本），可能引发XSS攻击，务必确保data.text来自可信数据源，或提前做了内容过滤。

方法二：仅解析字符实体（不渲染HTML标签） #

如果不需要把<p>这类标签渲染成HTML元素，只想把转义字符还原成正常文本，可以写一个工具函数来解析：

// 解析HTML字符实体的工具函数
const decodeHtmlEntities = (html) => {
  const tempElement = document.createElement('div');
  tempElement.innerHTML = html;
  return tempElement.textContent;
};

const Text = () => {
  return (
    <div className={styles.text}>{decodeHtmlEntities(data.text)}</div>
  )
}

这种方法会把所有转义字符还原（比如'变成单引号），但<p>会显示为<p>文本，不会生成段落标签。

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