ReactJS点击按钮切换组件显隐 状态更新但功能失效排查

问题根因 #

当前代码仅更新了存储类名的cName状态，未对两个视图组件做挂载/卸载的条件判断，大概率是将<GridCard>和<ListCard>同时渲染在了DOM中；且代码中未配套对应class的显隐CSS规则，同时按钮图标的active高亮类是硬编码写死的，最终导致切换失效、图标状态不对。

修复方案 #

二选一即可，优先推荐第一种条件渲染方案。

方案1：条件渲染（推荐） #

非激活状态的组件直接不挂载到DOM，性能更好，逻辑更清晰。

1. 调整状态定义，语义化命名，直接存储当前视图类型：

// 默认初始展示网格视图
const [viewType, setViewType] = useState('grid');

2. 修改按钮逻辑，动态给图标绑定高亮类，修复原来硬编码active的问题：

<button 
  onClick={() => setViewType('grid')}
  title="Grid View"
>
  <IoGrid className={viewType === 'grid' ? 'active' : ''} size="25"/>
</button>  

<button 
  onClick={() => setViewType('list')}
  title="List View"
>
  <BiAlignLeft className={viewType === 'list' ? 'active' : ''} size="25"/>
</button>

3. 组件渲染处加三元判断，只渲染当前选中的视图组件：

{
  viewType === 'grid'
    ? <GridCard className="jsGridView" />
    : <ListCard className="jsListView" />
}

方案2：CSS控制显隐（适合需保留组件状态的场景） #

如果需要保留两个组件的内部状态（比如表单输入内容、滚动位置），可以保留两个组件的挂载，通过CSS控制显示隐藏：

1. 先写好显隐对应的CSS规则：

.view-hidden {
  display: none !important;
}

2. 渲染组件时，根据当前cName状态动态给非激活组件加隐藏类：

<GridCard className={`jsGridView ${cName === 'jsListView' ? 'view-hidden' : ''}`} />
<ListCard className={`jsListView ${cName === 'jsGridView' ? 'view-hidden' : ''}`} />

3. 同样需要把按钮图标的硬编码active类改成动态绑定，逻辑和方案1里的按钮逻辑一致。

补充说明 #

• 状态命名尽量贴合实际存储的内容语义，原代码里用setClassName存储视图类型的写法可读性差，后续维护容易出问题
• 条件渲染方案不会保留非激活组件的状态，如果有状态保留需求再选CSS控制的方案

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