Reactで左側のメニューを実装する方法

react で左側のメニューを実装する方法: 1. ルーティング構造を定義します (「const Router = [{title: '',icon: 'laptop',...}]」などのコード)。 2ルーター ファイルをインポートし、マップ トラバーサルをループします。 3. 最初のレベルのメニューとサブレベルのメニュー バーを処理します。「renderSubMnenu = ({title,key,child}) => {...}」などのコードです。

#このチュートリアルの動作環境: Windows 10 システム、react18 バージョン、Dell G3 コンピューター。

React で左側のメニューを実装するにはどうすればよいですか?

React を使用して左側のメニュー バーを実装する

はじめに: React を使用して左側のメニュー バーを実装する

antd は、次のように特別にカスタマイズされています。バックグラウンド コンポーネント ライブラリには、開発者が使用できる多数のコンポーネントが用意されています。

• #公式 Web サイトのアドレス

  クリックしてジャンプ

## in ミドルエンドとバックエンドでは、メニュー項目が重要です。今日は、react と antd を組み合わせてメニュー列を構成します
最初にルーティング構造を定義します

const Router = [{
        title: '控制台',
        icon: 'laptop',
        key: '/index',
        role: ["user", "information", "product"]
    },
    {
        title: '用户管理',
        icon: 'laptop',
        key: '/index/user', // 菜单
        role: ["information", "user"], // 角色 
        child: [{
                key: '/index/user/list',
                title: '用户列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/user/add',
                title: '添加用户',
                icon: '',
                role: ["user"]
            }
        ]
    },
    {
        title: '部门管理',
        icon: 'bars',
        key: '/index/department',
        role: ["user"],
        child: [{
                key: '/index/department/list',
                title: '部门列表',
                icon: '',
                role: ["user"]
            },
            {
                key: '/index/department/add',
                title: '添加部门',
                icon: '',
                role: ["user"]
            },
        ]
    },
    {
        title: '加班',
        icon: 'info-circle-o',
        key: '/home/abouta'
    }
]
export default Router;

antd メニューによって提供されるものを使用します

これは、ルートに第 1 レベルのメニューがある場合、または以下のサブメニューを処理する必要がある場合、状況によっては考慮する必要があります

• #ルーター ファイルを導入し、マップ ループを通過します

• #マップを通過して、第 2 レベルのメニューがあるかどうかを確認します

• -

  import Router from './../../router/index'
  import {  Menu } from 'antd';
  const { SubMenu } = Menu;
  <Menu
                      onOpenChange={this.openMenu}
                      onClick={this.selectMenu}
                      theme="dark"
                      mode="inline"
                      selectedKeys={selectedKeys}
                      openKeys={openKeys}
                      style={{ height: &#39;100%&#39;, borderRight: 0 }}
                      >
                      {
                          Router && Router.map(firstItem => {
                              return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                          }) 
                      }
                      
                      </Menu>

第 1 レベルのメニューの処理

    renderMenu =({title,key}) => {
        return (
            <Menu.Item key={key}>
                <Link to={key}>
                    <span>{title}</span>
                </Link>
            </Menu.Item>
        )
    }

サブメニュー バーの再帰処理

  renderSubMnenu = ({title,key,child}) => {
        return (
            <SubMenu key={key} title={title}>
                {
                    child && child.map(item => {
                        return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item)
                    })
                }
            </SubMenu>
        )
        
    }

メニューの選択、強調表示、更新および保持の処理選択された状態

antd が提供する API に基づく操作

• selectedKeys 現在選択されているメニュー項目のキー配列 openKeys、現在展開されているサブメニュー メニューアイテム キー配列

• constructor(props) {
          super(props);
          this.state= {
              selectedKeys:[],
              openKeys:[]
          }
      }
      componentDidMount(){
          // 菜单状态
          const pathname = this.props.location.pathname;
          const menukey = pathname.split("/").slice(0,3).join('/');
          const menuHigh = {
              selectedKeys: pathname,
              openKeys: menukey
          }
          this.selectMenuHigh(menuHigh)
      }
      selectMenu =({item,key,keyPath}) => {
          // 选中菜单
          const menuHigh = {
              selectedKeys: key,
              openKeys: keyPath[keyPath.length - 1]
          }
          this.selectMenuHigh(menuHigh)
      }
      openMenu = (openKeys) => {
          // 展开
          this.setState({
              openKeys: [openKeys[openKeys.length - 1]]
          })
      }
      selectMenuHigh = ({selectedKeys,openKeys}) => {
          // 菜单高亮
          this.setState({
              selectedKeys: [selectedKeys],
              openKeys: [openKeys]
          })
      }

  完全なコード

  import React, { Component,Fragment } from 'react'
  import {Link,withRouter} from 'react-router-dom'
  import Router from './../../router/index'
  import {  Menu } from 'antd';
  const { SubMenu } = Menu;
  class AsideMenu extends Component {
      constructor(props) {
          super(props);
          this.state= {
              selectedKeys:[],
              openKeys:[]
          }
      }
      componentDidMount(){
          // 菜单状态
          const pathname = this.props.location.pathname;
          const menukey = pathname.split("/").slice(0,3).join('/');
          const menuHigh = {
              selectedKeys: pathname,
              openKeys: menukey
          }
          this.selectMenuHigh(menuHigh)
      }
      selectMenu =({item,key,keyPath}) => {
          // 选中菜单
          const menuHigh = {
              selectedKeys: key,
              openKeys: keyPath[keyPath.length - 1]
          }
          this.selectMenuHigh(menuHigh)
      }
      openMenu = (openKeys) => {
          // 展开
          this.setState({
              openKeys: [openKeys[openKeys.length - 1]]
          })
      }
      selectMenuHigh = ({selectedKeys,openKeys}) => {
          // 菜单高亮
          this.setState({
              selectedKeys: [selectedKeys],
              openKeys: [openKeys]
          })
      }
      // 处理一级菜单栏
      renderMenu =({title,key}) => {
          return (
              <Menu.Item key={key}>
                  <Link to={key}>
                      <span>{title}</span>
                  </Link>
              </Menu.Item>
          )
      }   
      // 处理子级菜单栏
      renderSubMnenu = ({title,key,child}) => {
          return (
              <SubMenu key={key} title={title}>
                  {
                      child && child.map(item => {
                          return item.child && item.child.length > 0 ? this.renderSubMnenu(item) : this.renderMenu(item)
                      })
                  }
              </SubMenu>
          )
          
      }
      render() {
          const { selectedKeys,openKeys } = this.state
          return (
              
                  
                      {
                          Router && Router.map(firstItem => {
                              return firstItem.child && firstItem.child.length > 0 ? this.renderSubMnenu(firstItem) : this.renderMenu(firstItem)
                          }) 
                      }
                      
                      
              
          )
      }
  }
  export default withRouter(AsideMenu)

推奨学習: "

react ビデオ チュートリアル

"

以上がReactで左側のメニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。