如何在 AntD（React UI 库）中根据菜单项单击更改内容

Question

我正在关注here 的 AntD Menu 教程，它展示了如何使用这个组件。但是当我点击不同的菜单选项时，我无法理解如何更改我的内容。尝试了很多搜索，但没有找到任何有用的帮助。

 import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {
    return (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span>nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span>nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span>nav 3</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            Some Conent
          </Content>
        </Layout>
      </Layout>
    );
  }
}

ReactDOM.render(<SiderDemo />, mountNode);

你能帮忙吗？

Answer 1

如果您想更改路线，这里有一个工作示例

https://codesandbox.io/embed/fervent-thunder-egyk1?fontsize=14&hidenavigation=1&theme=dark

在 Menu.Item 中添加 Link 组件并使用 react-router-dom 中的 BrowserRouter 进行包装

<Menu.Item key="2">
  CI/CD Pipelines
  <Link to={`${match.url}/cicd`} />
</Menu.Item>

Answer 2

如果不想每次选择菜单项时都改变路线，可以使用以下方法

function MyComponent(){
 const [selectedMenuItem, setSelectedMenuItem]= useState('item1');

 const componentsSwtich = (key) => {
 switch (key) {
   case 'item1':
     return (<h1>item1</h1>);
   case 'item2':
     return (<h1>item2</h1>);
   case 'item3':
     return (<h3>item3/h3>);
   default:
     break;
  }
 };

return(
 <div>
  <Menu selectedKeys={selectedMenuItem} mode="horizontal" onClick={(e) => 
        setSelectedMenuItem(e.key)}>
    <Menu.Item key="item1">your first component here</Menu.Item>
    <Menu.Item key="item2">your second here</Menu.Item>
    <Menu.Item key="item3">your third here</Menu.Item>
   </Menu>
   <div>
     {componentsSwitch(selectedMenuItem)}
   </div>
 </div>)

Answer 3

只需将您的布局标签包裹在react-router-dom 的路由器标签内。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Layout, Menu, Icon } from 'antd';

import Dashboard from './containers/Dashboard/Dashboard';
import Meseros from './containers/Meseros/Meseros';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class RouterApp extends Component {

    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Router>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="1">
                                <Icon type="pie-chart" />
                                <span>Deshboard</span>
                                <Link to="/" />
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="desktop" />
                                <span>Meseros</span>
                                <Link to="/meseros" />
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0, paddingLeft: 16 }}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                style={{ cursor: 'pointer' }}
                                onClick={this.toggle}
                            />
                        </Header>
                        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                            <Route exact path="/" component={Dashboard} />
                            <Route path="/meseros" component={Meseros} />
                        </Content>

                    </Layout>

                </Layout>
            </Router>
        );
    }
}


export default RouterApp;

Answer 4

您可以将onClick 与MenuItem 绑定，并在单击任何菜单项时重新呈现组件。您可以让您的 Constant.js 满足您的需求，或者在您的组件状态中对其进行初始化。

添加onClick方法

<Menu.Item 
 key="1"
 onClick={this.handleMenuClick}
 >
          <Icon type="user" />
          <span>nav 1</span>
</Menu.Item>

为MenuItem做一个句柄点击：

handleMenuClick = event => {
 //you can get here event.target.value
 //filter the content 
 //setState the content your component will re render and content will be updated.

}