React中如何使用emoji？支持获取HTML实体编码的方案咨询

适配库选择 #

直接选生产环境验证过的成熟库即可，完全覆盖你提出的三点要求：

• 优先用emoji-mart，是React生态维护周期最长、适配性最好的emoji方案：
  • 自带开箱即用的React渲染组件，传入短名、unicode值即可直接渲染emoji，支持自定义大小、皮肤色调、渲染模式等配置
  • 每个emoji的元数据中自带unified字段，存储标准十六进制编码，直接拼接&#x前缀和结尾分号就能生成你需要的HTML实体，比如🎯对应的unified值为1F3AF，拼接后就是🎯，和你给出的示例完全一致；需要十进制实体的话，把十六进制值转成10进制数字，拼接&#前缀即可
  • 内置完整的全量emoji数据集，覆盖所有正式发布版本的emoji，不需要自己额外爬取整理
• 如果需要更高的自定义灵活度，可以选emojibase，这是无框架绑定的emoji工具+数据集库，只提供数据和编码转换能力，你可以按需自己封装React渲染逻辑，打包体积更可控。

具体实现步骤 #

1. 安装依赖
   选emoji-mart的话直接安装对应React适配包即可：

   npm install @emoji-mart/react @emoji-mart/data
   

2. 获取全量emoji列表
   直接引入库自带的数据集，遍历即可拿到所有emoji的完整元数据：

   import emojiData from '@emoji-mart/data'
   // 全量emoji数组，每一项包含emoji字符、编码、名称、分类等属性
   const fullEmojiList = Object.values(emojiData.emojis)
   

3. 封装编码转换工具函数
   几行代码就能实现HTML实体生成逻辑：

   // 生成十六进制HTML实体
   const toHexEntity = (unifiedCode) => `&#x${unifiedCode};`
   // 生成十进制HTML实体
   const toDecEntity = (unifiedCode) => `&#${parseInt(unifiedCode, 16)};`
   
   // 示例：生成🎯对应的实体
   const targetEmoji = emojiData.emojis.target
   console.log(toHexEntity(targetEmoji.unified)) // 输出 🎯
   

4. React组件内渲染
   两种渲染方式都能正常显示：
   • 用库自带组件渲染，这种方式会加载统一的emoji资源，不会出现不同操作系统/浏览器下emoji样式不一致的问题：

     import Emoji from '@emoji-mart/react'
     import emojiData from '@emoji-mart/data'
     
     export default function EmojiRenderDemo() {
       return (
         <div>
           {/* 直接通过短名渲染 */}
           <Emoji data={emojiData} emoji="target" size={24} />
           {/* 渲染自定义编码对应的emoji */}
           <Emoji data={emojiData} emoji={toHexEntity('1F3AF')} size={24} />
         </div>
       )
     }
     

   • 如果要直接渲染生成的HTML实体，通过React的dangerouslySetInnerHTML属性绑定即可，也可以直接输出原生emoji字符渲染：

     export default function EntityRenderDemo() {
       const targetEntity = toHexEntity('1F3AF')
       return (
         <div>
           {/* 渲染HTML实体 */}
           <span dangerouslySetInnerHTML={{ __html: targetEntity }} />
           {/* 直接渲染原生emoji字符 */}
           <span>🎯</span>
         </div>
       )
     }
     

兼容提示：如果需要适配Windows7等老版本系统，优先用emoji-mart的svg/png渲染模式，直接渲染原生emoji或HTML实体可能会出现方块乱码。

内容的提问来源于stack exchange，提问作者Axel Somerseth Cordova