ReactJS多Note组件场景下，实现打开一个Emoji picker时关闭其他Picker

方法1：状态提升到父组件 #

把控制Picker显示的逻辑从单个Note组件挪到渲染所有Note的父组件里，父组件维护一个activePickerId状态，记录当前打开的Picker对应的Note唯一ID，确保同一时间只能有一个Picker打开。

实现步骤： #

1. 父组件定义状态：

const [activePickerId, setActivePickerId] = useState(null);

2. 给每个Note组件传递状态、更新方法和唯一ID：

{notes.map(note => (
  <Note
    key={note.id}
    noteId={note.id}
    isPickerOpen={activePickerId === note.id}
    togglePicker={() => {
      // 点击时，若当前Picker已开就关闭，否则打开当前并关闭其他
      setActivePickerId(prev => prev === note.id ? null : note.id);
    }}
  />
))}

3. Note组件内部用传入的状态控制显示：

function Note({ noteId, isPickerOpen, togglePicker }) {
  return (
    <div className="note">
      <button onClick={togglePicker}>打开表情选择器</button>
      {isPickerOpen && <EmojiPicker />}
    </div>
  );
}

方法2：用React Context管理全局状态 #

如果组件层级较深，状态提升不方便，可以用Context来统一管理Picker的激活状态，让所有Note组件都能访问和更新这个状态。

实现步骤： #

1. 创建Context和自定义Hook：

import { createContext, useContext, useState } from 'react';

const PickerContext = createContext();

export function PickerProvider({ children }) {
  const [activePickerId, setActivePickerId] = useState(null);
  
  const togglePicker = (noteId) => {
    setActivePickerId(prev => prev === noteId ? null : noteId);
  };
  
  return (
    <PickerContext.Provider value={{ activePickerId, togglePicker }}>
      {children}
    </PickerContext.Provider>
  );
}

export function usePicker() {
  return useContext(PickerContext);
}

2. 在父组件外层包裹Provider：

<PickerProvider>
  <div className="notes-container">
    {notes.map(note => <Note key={note.id} noteId={note.id} />)}
  </div>
</PickerProvider>

3. Note组件中使用自定义Hook获取状态：

function Note({ noteId }) {
  const { activePickerId, togglePicker } = usePicker();
  const isPickerOpen = activePickerId === noteId;
  
  return (
    <div className="note">
      <button onClick={() => togglePicker(noteId)}>打开表情选择器</button>
      {isPickerOpen && <EmojiPicker />}
    </div>
  );
}

补充：点击页面其他区域关闭Picker #

如果需要支持点击页面空白处关闭所有Picker，可以结合上面的方法，添加全局点击监听：

useEffect(() => {
  function handleClickOutside(e) {
    // 判断点击区域是否在Note组件内部，不在则关闭所有Picker
    if (!e.target.closest('.note')) {
      setActivePickerId(null);
    }
  }
  
  document.addEventListener('click', handleClickOutside);
  return () => document.removeEventListener('click', handleClickOutside);
}, [setActivePickerId]);

状态提升是最直接的方案，适合组件层级不深的场景；Context则更适合复杂的多层级组件结构。

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