React中使用变量渲染Fontello自定义字体图标失败求助

问题原因 #

React在JSX中渲染变量时，不会自动解析HTML实体字符串，也不会把数字直接转换为对应Unicode字符，所以直接传入实体字符串或数字会原样显示，无法渲染出字体图标。

解决方案 #

1. 处理实体字符串（如示例中的toto） #

不要直接存储""这类HTML实体字符串，改用以下两种方式：

• 方法一：使用Unicode转义字符
  直接写出图标对应的Unicode转义值（注意以\u开头，后跟四位十六进制编码）：

  let toto = '\ue801'; // 对应的Unicode字符
  return <i className="demo-icon">{toto}</i>;
  

• 方法二：用String.fromCharCode转换十六进制值
  将十六进制编码转为十进制后传入方法，生成对应字符：

  let toto = String.fromCharCode(0xe801); // 0xe801是十六进制的e801
  return <i className="demo-icon">{toto}</i>;
  

2. 处理十进制数字（如示例中的tata） #

通过String.fromCharCode方法，将十进制数字直接转换为对应Unicode字符即可，注意确保数字是字体图标的正确十进制编码：

// 若图标对应编码是，十进制为59393
let tata = 59393; 
// 若你的图标确实对应十进制2049（即ࠁ），则保留原数字
// let tata = 2049;
return <i className="demo-icon">{String.fromCharCode(tata)}</i>;

动态解析实体字符串（可选） #

如果必须从外部接收HTML实体字符串（比如接口返回），可以手动解析：

function decodeEntity(entity) {
  const div = document.createElement('div');
  div.innerHTML = entity;
  return div.textContent;
}

let toto = "";
return <i className="demo-icon">{decodeEntity(toto)}</i>;

注意：此方法涉及DOM操作，性能略差，优先推荐前两种方式。

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