Emoji-mart表情选择器无法显示的代码问题排查求助

你的代码核心问题在于错误手动控制面板显示状态，未正确使用EmojiMart Picker实例的内置方法，同时缺少状态切换逻辑。以下是具体问题点和修正方案：

问题分析 #

1. 错误操作DOM类与自定义属性：EmojiMart的Picker实例自带showPicker()和hidePicker()方法，无需手动修改pickerVisible属性或给面板添加visible类，这类操作会与组件内部逻辑冲突。
2. 缺少面板切换逻辑：原代码每次点击按钮都只执行显示操作，未判断面板当前是否可见，导致选中表情隐藏面板后，再次点击无法重新唤起。
3. 冗余的面板挂载逻辑：Picker实例创建后，emojiPicker.picker会立即生成，不需要通过setTimeout轮询挂载。

修正后的完整代码 #

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-mart@latest/css/emoji-mart.css" />
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>

<button id="emoji-button">😀</button>

JavaScript部分 #

// 创建Picker实例，配置选中事件
const emojiPicker = new EmojiMart.Picker({
    emojiSize: 24,
    title: 'Pick an emoji',
    onSelect: (emoji) => {
        const emojiButton = document.getElementById('emoji-button');
        emojiButton.innerHTML = emoji.native;
        // 使用实例内置方法隐藏面板
        emojiPicker.hidePicker();
    },
});

// 将面板直接挂载到页面
document.body.appendChild(emojiPicker.picker);

const emojiButton = document.getElementById('emoji-button');
emojiButton.addEventListener('click', () => {
    // 判断面板当前可见状态，切换显示/隐藏
    if (emojiPicker.isPickerVisible()) {
        emojiPicker.hidePicker();
    } else {
        emojiPicker.showPicker();
    }
});

关键修改说明 #

• 直接使用组件内置的showPicker()/hidePicker()方法控制面板状态，避免手动操作DOM导致的逻辑冲突。
• 通过isPickerVisible()方法判断面板当前状态，实现点击按钮切换面板显示/隐藏的需求。
• 移除冗余的轮询挂载逻辑，直接将生成的面板DOM挂载到页面，简化代码流程。

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