React(TS)项目中使用emoji-mart如何实现美观的emoji显示效果？

问题现象 #

• 未做特殊配置时emoji默认渲染效果：
  
• 预期实现的统一美观emoji效果：
  
• 直接配置set: apple/set: facebook参数后，emoji渲染为哈希乱码：
  

问题根因 #

emoji-mart 5.x及以上版本将各平台的emoji资源包做了独立拆分，核心包不再内置Apple、Facebook等非原生emoji资源。仅在组件上传入set参数、未安装对应资源包且未做初始化注入时，组件无法匹配到正确的渲染资源，就会出现哈希乱码。

解决步骤 #

1. 安装对应依赖 #

根据需要的emoji风格安装配套资源包，必须同时安装基础数据包和对应风格的资源包：

• Apple风格：安装@emoji-mart/data、@emoji-mart/apple
• Facebook风格：安装@emoji-mart/data、@emoji-mart/facebook
• Twitter/Google等其他风格同理替换对应风格包名即可

以Apple风格为例，安装命令：

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

使用yarn/pnpm的话替换为对应包管理器的安装命令即可。

2. 初始化资源后再渲染组件 #

不能仅给Picker组件传入set属性，必须先调用init方法注入数据源和对应风格资源，TypeScript写法示例：

import data from '@emoji-mart/data'
import apple from '@emoji-mart/apple'
import { Picker, init } from 'emoji-mart'
import { useEffect } from 'react'

export default function EmojiPicker() {
  useEffect(() => {
    init({ 
      data,
      set: 'apple',
      sets: { apple }
    })
  }, [])

  return <Picker set="apple" />
}

3. 异常排查 #

如果按上述配置后仍有渲染问题，逐一检查以下常见踩坑点：

• 确认核心包emoji-mart和@emoji-mart/data、风格资源包的大版本完全一致，版本不匹配会导致资源映射关系错乱
• Vite/Next.js等项目注意构建配置不要把emoji静态资源误拦截或配置为错误的CDN地址，资源加载404会直接导致渲染乱码
• 如果不需要强统一跨平台emoji风格，也可以直接配置set="native"，该模式不需要额外安装资源包，会调用当前系统内置emoji渲染，不会出现乱码，缺点是不同操作系统下显示效果有差异。

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