如何在JSX中将实体类型转换为人类可读文本？

针对从opentdb获取的含HTML实体的文本（比如“哪位加拿大雷鬼音乐人在1993年凭借歌曲《Informer》走红？”这类），在JSX里有两种常用处理方式：

方法一：使用dangerouslySetInnerHTML #

如果确认数据源（opentdb）安全可信，可以直接用React提供的这个属性渲染原始HTML内容，自动解析实体：

const question = "“哪位加拿大雷鬼音乐人在1993年凭借歌曲《Informer》走红？”";

return <div dangerouslySetInnerHTML={{ __html: question }} />;

方法二：使用HTML实体解码库 #

如果不想用dangerouslySetInnerHTML，可以用专门的解码库（比如he）先解码文本，再正常渲染：

1. 安装库：

npm install he

2. 在组件中使用：

import he from 'he';

const question = "“哪位加拿大雷鬼音乐人在1993年凭借歌曲《Informer》走红？”";
const decodedQuestion = he.decode(question);

return <div>{decodedQuestion}</div>;

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