React可拆分移动面板：实现Chooser面板选择指定子面板的最优方案

基于你的React应用场景，结合BlenderSplitter组件的特性，以下是实现Chooser面板选择对应功能面板的最优方案：

1. 核心状态设计 #

• 将当前选中面板ID的状态提升到所有面板（Chooser+1-4号功能面板）的共同父组件，确保状态能在组件间共享。使用React内置的useState即可满足基础需求，复杂场景可扩展为React Context或Redux：

  const [activePanelId, setActivePanelId] = useState(null);
  

2. Chooser面板按钮逻辑实现 #

• 给每个对应1-4号面板的按钮绑定点击事件，直接通过状态更新函数设置选中的面板ID，替换原有的alert逻辑：

  // Chooser组件内部
  const handlePanelSelect = (panelId) => {
    setActivePanelId(panelId);
  };
  
  return (
    <div className="chooser-panel">
      <button onClick={() => handlePanelSelect('panel-1')}>选择面板1</button>
      <button onClick={() => handlePanelSelect('panel-2')}>选择面板2</button>
      <button onClick={() => handlePanelSelect('panel-3')}>选择面板3</button>
      <button onClick={() => handlePanelSelect('panel-4')}>选择面板4</button>
    </div>
  );
  

3. 功能面板的选中状态反馈 #

• 给每个功能面板添加动态样式，根据activePanelId判断是否为当前选中项，提供清晰的视觉反馈（比如高亮边框、背景色）：

  // 单个功能面板组件
  const FunctionPanel = ({ id, activePanelId, children }) => {
    const isActive = activePanelId === id;
    return (
      <div 
        className={`function-panel ${isActive ? 'active' : ''}`}
        id={id}
      >
        {children}
      </div>
    );
  };
  

  对应的CSS样式：

  .function-panel.active {
    border: 2px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
    outline: none;
  }
  

4. 可选的交互增强 #

• 如果需要在选中面板时自动聚焦或滚动到目标面板（适用于面板较多、视图无法完全展示的场景），可在状态更新后添加DOM操作：

  const handlePanelSelect = (panelId) => {
    setActivePanelId(panelId);
    const panelElement = document.getElementById(panelId);
    if (panelElement) {
      panelElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
      // 若面板支持聚焦，可添加focus()
      panelElement.setAttribute('tabindex', '-1');
      panelElement.focus();
    }
  };
  

5. 复杂场景的状态扩展 #

• 若后续应用复杂度提升（比如面板数量动态变化、多页面共享选中状态），可通过React Context封装状态逻辑，避免props层层传递：

  // PanelContext.js
  import { createContext, useContext, useState } from 'react';
  
  const PanelContext = createContext();
  
  export const PanelProvider = ({ children }) => {
    const [activePanelId, setActivePanelId] = useState(null);
    return (
      <PanelContext.Provider value={{ activePanelId, setActivePanelId }}>
        {children}
      </PanelContext.Provider>
    );
  };
  
  export const usePanelContext = () => useContext(PanelContext);
  

  在Chooser和功能面板中直接调用usePanelContext()获取状态和更新方法即可。

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