如何在同一页面切换多个React组件？Material-UI列表实现疑问

嘿，这个问题其实挺典型的，咱们一步步来搞定它～核心思路就是给每个Material-UI的ListItem绑定点击事件，再通过父组件的状态来跟踪选中项，先实现日志输出，后续切换组件就水到渠成了。

具体实现步骤 #

1. 在父组件中维护选中状态

首先用React的useState钩子创建一个状态，用来记录当前点击的列表项标识：

import { useState } from 'react';
import { List, ListItem, ListItemText } from '@mui/material';
// 导入你的专属组件
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const Dashboard = () => {
  // 用字符串或唯一标识记录当前选中的组件
  const [activeComponentKey, setActiveComponentKey] = useState(null);

2. 给ListItem绑定onClick事件

Material-UI的ListItem本身就支持onClick属性，直接把事件处理器绑在上面就行，同时可以加上button属性让列表项有可点击的交互样式（比如hover效果）：

// 统一处理列表项点击事件
  const handleListItemClick = (key) => {
    // 先实现你要的日志输出
    console.log(`当前点击的列表项：${key}`);
    // 更新选中状态，为后续切换组件做准备
    setActiveComponentKey(key);
  };

  return (
    <div style={{ display: 'flex' }}>
      {/* 侧边导航列表 */}
      <List sx={{ width: '250px', borderRight: '1px solid #eee' }}>
        <ListItem 
          button 
          onClick={() => handleListItemClick('componentA')}
          // 可选：高亮当前选中的列表项
          selected={activeComponentKey === 'componentA'}
        >
          <ListItemText primary="组件A入口" />
        </ListItem>
        <ListItem 
          button 
          onClick={() => handleListItemClick('componentB')}
          selected={activeComponentKey === 'componentB'}
        >
          <ListItemText primary="组件B入口" />
        </ListItem>
      </List>

      {/* 内容展示区域 */}
      <div style={{ flex: 1, padding: '24px' }}>
        {/* 后续用条件渲染切换组件，现在先看日志输出 */}
        {activeComponentKey === 'componentA' && <ComponentA />}
        {activeComponentKey === 'componentB' && <ComponentB />}
        {!activeComponentKey && <p>请选择一个组件查看内容</p>}
      </div>
    </div>
  );
};

export default Dashboard;

关键细节说明 #

• button属性：给ListItem加上这个属性后，它会自动获得可点击元素的样式（比如光标变成手型、hover时的背景变化），提升用户体验。
• selected属性：配合状态值可以高亮当前选中的列表项，Material-UI会自动应用预设的选中样式，不用自己写额外CSS。
• 事件处理器的复用：把点击逻辑抽成handleListItemClick函数，避免重复代码，后续要扩展逻辑（比如路由跳转、数据加载）也更方便。

现在你可以运行代码测试，点击每个列表项时控制台都会输出对应的标识，确认没问题后，就可以根据activeComponentKey的值，用条件渲染（&&、switch或者useEffect）来切换展示对应的专属组件啦。

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