React编辑器中基于选中组件切换上下文菜单的实现咨询

嘿，这个需求我之前做类似编辑器的时候刚好实现过，用React的状态管理+组件拆分的思路就特别贴合React的设计风格，给你分享下具体的实现方案：

本质上就是用一个顶层组件统一管理「当前激活的编辑项」状态，然后根据这个状态动态渲染对应的锚定菜单；同时让每个可编辑组件在被选中/聚焦时，通知顶层组件更新激活状态。完全符合React单向数据流的理念，组件职责也很清晰。

1. 状态集中管理：在顶层容器组件中，用useState存储当前激活的编辑项标识（比如字符串、枚举或者唯一ID）。
2. 可编辑组件封装：给每个可编辑项（EditableOne、EditableTwo）绑定激活触发事件（比如onFocus、onClick），触发时调用顶层传入的回调更新激活状态。
3. 菜单条件渲染：根据当前激活的状态，在锚定菜单区域渲染对应的菜单组件或内容。

顶层容器组件 #

import { useState } from 'react';
import EditableOne from './EditableOne';
import EditableTwo from './EditableTwo';
import MenuOne from './MenuOne';
import MenuTwo from './MenuTwo';

function EditorContainer() {
  // 存储当前激活的编辑项，初始为null表示无激活项
  const [activeItem, setActiveItem] = useState(null);

  // 处理激活状态更新的回调
  const handleItemActivate = (itemKey) => {
    setActiveItem(itemKey);
  };

  return (
    <div className="editor-container">
      {/* 可编辑项区域 */}
      <div className="editable-items">
        <EditableOne 
          onActivate={() => handleItemActivate('itemOne')} 
          content="Item One - 点击或聚焦编辑我"
        />
        <EditableTwo 
          onActivate={() => handleItemActivate('itemTwo')} 
          content="Item Two - 点击或聚焦编辑我"
        />
      </div>

      {/* 锚定菜单区域 - 固定在页面某个位置，比如顶部/侧边 */}
      <div className="anchored-menu">
        {activeItem === 'itemOne' && <MenuOne />}
        {activeItem === 'itemTwo' && <MenuTwo />}
        {!activeItem && <p>请选择一个编辑项</p>}
      </div>
    </div>
  );
}

export default EditorContainer;

可编辑项组件（以EditableOne为例） #

function EditableOne({ onActivate, content }) {
  return (
    <div 
      className="editable-item"
      // 聚焦时触发激活
      onFocus={onActivate}
      // 点击也触发激活（可选，根据你的交互需求调整）
      onClick={onActivate}
      // 让普通div可以被聚焦
      tabIndex={0}
    >
      {content}
    </div>
  );
}

export default EditableOne;

对应菜单组件（以MenuOne为例） #

function MenuOne() {
  return (
    <div className="menu">
      <button>复制Item One</button>
      <button>编辑Item One内容</button>
      <button>删除Item One</button>
    </div>
  );
}

export default MenuOne;

如果你的编辑器复杂度较高，可以试试这些进阶方案：

• 通用可编辑组件：如果有很多类型的可编辑项，封装一个通用的EditableItem组件，接收menuKey、content等props，避免重复代码。
• 全局失焦处理：如果需要点击页面其他区域时取消激活状态，可以在顶层组件中添加全局点击监听，判断点击目标是否属于可编辑项或菜单，否则重置activeItem为null。
• Context API 简化传参：如果组件层级很深，不想层层传递onActivate回调，可以用React Context封装激活状态和更新方法，让子组件直接通过useContext获取并调用。

举个Context的简化示例：

// EditorContext.js
import { createContext, useContext, useState } from 'react';

const EditorContext = createContext();

export function EditorProvider({ children }) {
  const [activeItem, setActiveItem] = useState(null);
  return (
    <EditorContext.Provider value={{ activeItem, setActiveItem }}>
      {children}
    </EditorContext.Provider>
  );
}

export function useEditor() {
  return useContext(EditorContext);
}

然后在EditableOne中直接使用：

import { useEditor } from './EditorContext';

function EditableOne({ content }) {
  const { setActiveItem } = useEditor();
  return (
    <div 
      className="editable-item"
      onFocus={() => setActiveItem('itemOne')}
      onClick={() => setActiveItem('itemOne')}
      tabIndex={0}
    >
      {content}
    </div>
  );
}

最后记得在App根组件包裹EditorProvider，这样所有子组件都能访问到上下文状态。

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