Emoji-mart选择器非Native集仅显示话题表情及单个组件使用求助

一、修复表情选择器仅显示话题表情的问题 #

你的问题出在EmojiPicker组件的实现方式上——你使用了emoji-mart的Vanilla JS初始化方式（new Picker()），但在React环境中应该直接使用其提供的React组件版本。这种混用导致非Native表情集无法正确加载，仅显示话题类表情。

修复后的EmojiPicker组件代码： #

import React from "react";
import data from "@emoji-mart/data";
import { Picker, PickerProps } from "emoji-mart/react"; // 导入React专用组件

const EmojiPicker = (props: PickerProps) => {
  return <Picker {...props} data={data} />;
};

export default EmojiPicker;

关键修改点： #

• 切换导入路径到@emoji-mart/react下的Picker组件，这是官方为React适配的版本
• 直接返回<Picker>组件，摒弃手动new Picker()的Vanilla JS写法
• 类型定义简化为PickerProps，无需冗余的any或Readonly包装

修改后再使用set="twitter"就能正常显示完整的Twitter表情集了。

二、单个表情的显示方法 #

emoji-mart提供了Emoji组件用于渲染单个表情，步骤如下：

1. 导入Emoji组件 #

import { Emoji } from "emoji-mart/react";

2. 渲染单个表情 #

可通过表情名称或Unicode ID指定要显示的表情，同时支持指定表情集：

// 通过表情名称渲染
<Emoji emoji="grinning" set="twitter" size={24} />

// 通过Unicode ID渲染
<Emoji id="1f600" set="apple" size={32} />

常用属性说明： #

• emoji: 表情名称（如"grinning"、"heart"）
• id: 表情的Unicode ID（如"1f600"）
• set: 表情集（如"twitter"、"apple"、"google"）
• size: 表情尺寸（单位px）
• skin: 肤色选项（0-5，对应不同肤色预设）

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