React移动端组件互斥显示/隐藏：如何实现跨组件状态联动？

最可靠的方式是将两个组件的展开状态提升到父组件统一管理，利用React的状态向下传递特性，直接控制两个组件的显示/隐藏，天然实现互斥逻辑。

步骤1：父组件统一管理互斥状态 #

在主tsx文件中，用一个状态标记当前展开的面板（同一时间只能有一个面板展开或都收起），并定义切换回调传递给子组件：

// 主tsx文件
import { useState } from 'react';
import TabsMobile from './TabsMobile';
import AdditionalMobile from './AdditionalMobile';

export default function MainComponent() {
  const [tab, setTab] = useState(/* 原有初始值 */);
  const [pages, setPages] = useState(/* 原有初始值 */);
  
  // 用枚举值管理当前展开的面板，null表示都收起
  const [expandedPanel, setExpandedPanel] = useState<'tabs' | 'additional' | null>(null);

  // 切换标签面板的展开状态
  const toggleTabs = () => {
    setExpandedPanel(prev => 
      prev === 'tabs' ? null : 'tabs'
    );
  };

  // 切换图标面板的展开状态
  const toggleAdditional = () => {
    setExpandedPanel(prev => 
      prev === 'additional' ? null : 'additional'
    );
  };

  return (
    <>
      <TabsMobile
        tab={tab}
        setTab={setTab}
        setPages={setPages}
        isOpen={expandedPanel === 'tabs'} // 传递是否展开的状态
        onToggle={toggleTabs} // 传递切换回调
      />
      <AdditionalMobile
        isOpen={expandedPanel === 'additional'}
        onToggle={toggleAdditional}
      />
    </>
  );
}

步骤2：修改子组件，移除内部状态 #

把TabsMobile和AdditionalMobile内部的open状态移除，改用父组件传递的isOpen控制显示，点击事件触发父组件的onToggle回调：

TabsMobile组件修改：

// TabsMobile.tsx
interface TabsMobileProps {
  tab: /* 原有类型 */;
  setTab: (value: /* 原有类型 */) => void;
  setPages: (value: /* 原有类型 */) => void;
  isOpen: boolean;
  onToggle: () => void;
}

export default function TabsMobile({ tab, setTab, setPages, isOpen, onToggle }: TabsMobileProps) {
  const handleHeaderClick = () => {
    onToggle();
    // 如需持久化状态，在这里写入localStorage
    localStorage.setItem('tabsMobileOpen', JSON.stringify(!isOpen));
  };

  return (
    <div>
      {/* 顶部小方块触发区 */}
      <div onClick={handleHeaderClick}>
        {/* 小方块UI */}
      </div>
      {/* 根据父组件传递的isOpen控制显示 */}
      {isOpen && (
        <div>
          {/* 标签列表内容 */}
        </div>
      )}
    </div>
  );
}

AdditionalMobile组件修改：

// AdditionalMobile.tsx
interface AdditionalMobileProps {
  isOpen: boolean;
  onToggle: () => void;
}

export default function AdditionalMobile({ isOpen, onToggle }: AdditionalMobileProps) {
  const handleHeaderClick = () => {
    onToggle();
    // 如需持久化状态，在这里写入localStorage
    localStorage.setItem('additionalMobileOpen', JSON.stringify(!isOpen));
  };

  return (
    <div>
      {/* 下方小方块触发区 */}
      <div onClick={handleHeaderClick}>
        {/* 小方块UI */}
      </div>
      {/* 根据父组件传递的isOpen控制显示 */}
      {isOpen && (
        <div>
          {/* 图标列表内容 */}
        </div>
      )}
    </div>
  );
}

可选：页面刷新后保留状态 #

如果需要刷新页面后恢复之前的展开状态，在父组件初始化时从localStorage读取：

// 主tsx中初始化状态
const initialExpandedPanel = (() => {
  const tabsOpen = localStorage.getItem('tabsMobileOpen') === 'true';
  const additionalOpen = localStorage.getItem('additionalMobileOpen') === 'true';
  
  // 避免两个都为true的情况，优先保留标签面板的状态
  if (tabsOpen) return 'tabs';
  if (additionalOpen) return 'additional';
  return null;
})();

const [expandedPanel, setExpandedPanel] = useState<'tabs' | 'additional' | null>(initialExpandedPanel);

为什么之前的方案失效？ #

1. localStorage监听问题：React的useEffect不会自动监听localStorage变化，手动加storage事件监听容易出现跨标签页同步问题，且状态同步不及时。
2. props传递未成功：大概率是子组件仍在使用内部useState维护状态，没有用父组件传递的props控制显示，导致父子状态不同步。

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