React中如何将HTML实体数组正确渲染为Unicode字符？

我来帮你梳理几个靠谱的解决办法，你可以根据自己的场景选最合适的：

方法一：手动解码HTML实体并生成Unicode字符 #

你之前用replace把&#换成\u没成功，是因为动态生成的"\uxf101"只是个普通字符串，React不会把它当成Unicode转义来解析。正确的做法是先解码双重转义的实体，再提取码点生成字符：

// 写一个解码函数
const decodeFontEntity = (entityStr) => {
  // 第一步：把&还原成&，得到真正的HTML实体
  const realEntity = entityStr.replace(/&/g, '&');
  // 第二步：匹配十六进制的实体格式，提取码点
  const hexMatch = realEntity.match(/&#x([0-9a-fA-F]+);/);
  if (hexMatch) {
    // 把十六进制转成十进制，用fromCodePoint生成字符
    const codePoint = parseInt(hexMatch[1], 16);
    return String.fromCodePoint(codePoint);
  }
  // 如果不是目标格式，直接返回原字符串
  return realEntity;
};

// 在React组件里使用
const arr = [''];
function MyComponent() {
  return <span>{decodeFontEntity(arr[0])}</span>;
}

这个方法的好处是完全安全，不用担心XSS风险，不管实体内容是不是可控的都能用。

方法二：继续使用dangerouslySetInnerHTML（注意风险） #

你现在用的这个方法其实是可行的，但要注意**只有当你的数组内容是完全可控的（比如自己定义的，不是用户输入的）**才推荐用。因为dangerouslySetInnerHTML会直接把字符串当成HTML解析，如果内容里有恶意代码，就会造成XSS攻击。

如果确认内容安全，写法可以简化一点：

const arr = [''];
function MyComponent() {
  return <span dangerouslySetInnerHTML={{ __html: arr[0] }} />;
}

方法三：用字体库的React组件（如果是图标字体） #

如果你的自定义字体是类似Font Awesome这类图标库，直接用它们官方提供的React组件会更方便，不用处理任何实体。比如：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function MyComponent() {
  return <FontAwesomeIcon icon={faCoffee} />;
}

这样既安全又省心，还能享受到组件带来的其他特性（比如大小、颜色调整）。

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