如何在NextJs中显示'A & B'而非'A & B'？

方法1：使用dangerouslySetInnerHTML #

直接将转义后的字符串作为HTML内容插入，Next.js会自动解析实体：

function DisplayText() {
  const escapedText = 'A & B'; // API返回的转义字符串
  return <div dangerouslySetInnerHTML={{ __html: escapedText }} />;
}

注意：仅当你完全信任字符串来源时使用，避免XSS攻击风险。

方法2：手动解码实体 #

方式A：利用浏览器DOM解析（客户端渲染） #

通过临时DOM元素解析实体：

function decodeHtmlEntities(text) {
  const tempElement = document.createElement('div');
  tempElement.innerHTML = text;
  return tempElement.textContent || tempElement.innerText;
}

function DisplayText() {
  const escapedText = 'A & B';
  const decodedText = decodeHtmlEntities(escapedText);
  return <div>{decodedText}</div>;
}

如果需要服务端渲染，可通过next/dynamic禁用该组件的SSR：

import dynamic from 'next/dynamic';

const DecodedText = dynamic(() => import('./DecodedTextComponent'), {
  ssr: false
});

方式B：正则替换常用实体（兼容SSR） #

针对常见HTML实体写正则替换逻辑：

function decodeHtmlEntities(text) {
  return text.replace(/&/g, '&')
             .replace(/&lt;/g, '<')
             .replace(/&gt;/g, '>')
             .replace(/&quot;/g, '"')
             .replace(/&#039;/g, "'");
}

function DisplayText() {
  const escapedText = 'A &amp;amp; B';
  const decodedText = decodeHtmlEntities(escapedText);
  return <div>{decodedText}</div>;
}

此方法无需依赖浏览器环境，但需覆盖你业务中用到的所有实体类型。

方法3：使用第三方库（全场景兼容） #

用he库处理所有HTML实体编码/解码：

1. 安装依赖：

npm install he
# 或
yarn add he

2. 组件中使用：

import he from 'he';

function DisplayText() {
  const escapedText = 'A & B';
  const decodedText = he.decode(escapedText);
  return <div>{decodedText}</div>;
}

该库支持所有HTML实体，且兼容服务端渲染。

内容的提问来源于stack exchange，提问作者Minn Khant Naing