React Layout动态内容实现：如何让侧边栏选项对应不同内容？

要让每个侧边栏选项显示不同内容，你需要通过状态管理跟踪当前选中的菜单项，并根据选中项渲染对应的内容。以下是修改后的完整代码：

import React, { useState } from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

const items1 = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));

const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1);
  return {
    key: `sub${key}`,
    icon: React.createElement(icon),
    label: `subnav ${key}`,
    children: new Array(4).fill(null).map((_, j) => {
      const subKey = index * 4 + j + 1;
      return {
        key: subKey,
        label: `option${subKey}`,
      };
    }),
  };
});

const App = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  
  // 跟踪当前选中的菜单键
  const [selectedKey, setSelectedKey] = useState('1');

  // 定义每个选项对应的内容（可替换为React组件）
  const contentMap = {
    '1': '用户子导航 - 选项1内容',
    '2': '用户子导航 - 选项2内容',
    '3': '用户子导航 - 选项3内容',
    '4': '用户子导航 - 选项4内容',
    '5': '设备子导航 - 选项5内容',
    '6': '设备子导航 - 选项6内容',
    '7': '设备子导航 - 选项7内容',
    '8': '设备子导航 - 选项8内容',
    '9': '通知子导航 - 选项9内容',
    '10': '通知子导航 - 选项10内容',
    '11': '通知子导航 - 选项11内容',
    '12': '通知子导航 - 选项12内容',
  };

  return (
    <Layout>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items1}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: '0 48px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>{contentMap[selectedKey]?.split(' - ')[0] || 'App'}</Breadcrumb.Item>
        </Breadcrumb>
        <Layout style={{ padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG }}>
          <Sider style={{ background: colorBgContainer }} width={200}>
            <Menu
              mode="inline"
              selectedKeys={[selectedKey]} // 使用状态控制选中项
              defaultOpenKeys={['sub1']}
              style={{ height: '100%' }}
              items={items2}
              onClick={({ key }) => setSelectedKey(key)} // 点击菜单时更新状态
            />
          </Sider>
          <Content style={{ padding: '0 24px', minHeight: 280 }}>
            {/* 根据选中的键渲染对应内容 */}
            {contentMap[selectedKey] || '请选择一个选项查看内容'}
          </Content>
        </Layout>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  );
};

export default App;

关键修改点说明： #

• 添加状态管理：使用useState钩子创建selectedKey状态，跟踪当前选中的菜单项，初始值设为默认选中的'1'。
• 绑定菜单点击事件：给侧边栏Menu组件添加onClick回调，点击菜单项时更新selectedKey状态。
• 内容映射表：创建contentMap对象，将每个菜单键与对应的内容关联。你可以将字符串替换为任意React组件（比如复杂的表单、列表等）。
• 动态渲染内容：在内容区域根据selectedKey从contentMap中取出对应内容进行渲染。
• 优化面包屑（可选）：面包屑的最后一项也根据选中内容动态更新，提升用户体验。

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