Reactで3レベルのメニューを実装する方法

3 レベルのメニューを実装するための React メソッド: 1. 3 レベルの親メニューを作成および展開するメソッドは "onOpenChange = (openKeys) => {...}"; 2. スルー「handleSelectkeys(e) {...}」で選択状態を設定します。 3. 「oli.push(

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

react で 3 レベルのメニューを実装する方法?

react antd は、親メニュー バー (3 レベルのメニュー バー) のサイドバーの展開のみを実装します。

3 レベルの親メニューを展開する方法

onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        let openList;
        if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                this.setState({
                    openKeys:openList                });
            }else{
                this.setState({
                    openKeys:openKeys                });
            }           
        }else{
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                openList.push(latestOpenKey);
                this.setState({
                    openKeys:openList[1] ? openList : [openList[0],openList[2]]
                });
            }else{
                this.setState({
                    openKeys: latestOpenKey ? [latestOpenKey] : [],
                });
            }            
        }
    }<strong></strong>選択したものを設定state</p>
<p></p>
<pre class="brush:php;toolbar:false"> handleSelectkeys(e){
        if(this.state.isShow){
            this.setState({ 
                selectedKey:e.key,
                openKeys:e.keyPath[length] == 3  ? [e.keyPath[2],e.keyPath[1]] : [e.keyPath[0]],
                isShow:true
             }); 
        }       
    }

サイド列の生成

const data = this.props.list;
        var html = [];
        for(var i=0;i<data.length;i++){
            if(data[i].children){
                var li = []
                for(var j=0;j<data[i].children.length;j++){
                    var liData = data[i].children[j];
                    if(liData.children){
                        var oli = [];
                        for(var k=0;k<liData.children.length;k++){
                            oli.push(
                                <Menu.Item key={liData.children[k].url}>
                                    <Link to={
                                        {
                                            pathname:liData.children[k].url,
                                            state:{//三级菜单下传openKeys传两个值，展开两级
                                                parent:this.state.openKeys[0],
                                                child:this.state.openKeys[1]
                                            }
                                        }
                                    }>
                                        <span>{liData.children[k].text}</span>
                                    </Link>
                                </Menu.Item>
                            )
                        }
                        var oul = <SubMenu key={liData.id} title={<span>{liData.iconCls && <Icon type={liData.iconCls} />}<span>{liData.text}</span></span>}>{oli}</SubMenu>;
                        li.push(oul);
                    }else{
                        li.push(
                            <Menu.Item key={liData.url}>
                                <Link to={
                                    {
                                        pathname:liData.url,
                                        state:{//二级菜单下openKeys传一个值，展开一级
                                            parent:this.state.openKeys[0],
                                            // child:this.state.openKeys[1] ? this.state.openKeys[1] : &#39;&#39;
                                        }
                                    }
                                    
                                    } >
                                    {liData.iconCls && <Icon type={liData.iconCls} />}
                                    <span>{liData.text}</span>
                                </Link>
                            </Menu.Item>
                        );
                    }
                }
                var ul = <SubMenu key={data[i].id} title={<span>{data[i].iconCls && <Icon type={data[i].iconCls} />}<span>{data[i].text}</span></span>}>{li}</SubMenu>;
                html.push(ul);
            }else{
                html.push(
                    <Menu.Item key={data[i].url}>
                        <Link to={                           
                            {
                                pathname:data[i].url,
                                state:{//一级菜单下传空值，不展开菜单栏
                                    parent:&#39;&#39;
                                }
                            }
                            } >
                            {data[i].iconCls && <Icon type={data[i].iconCls} />}
                            <span>{data[i].text}</span>
                        </Link>
                    </Menu.Item>
                )
            }
        }

サイドバー コンポーネント Menu.js すべてのコード

import React from 'react'import { Menu,Icon } from 'antd';import {Link,withRouter} from 'react-router-dom'const { SubMenu } = Menu;

 class Menus extends React.Component{
    constructor(props){
        super(props)
        this.state={
            openKeys:['1','100'],
            rootSubmenuKeys:[],
            selectedKeys:[this.props.history.location.pathname], //选中
            isShow:false //判断是否已经展开，如已展开停止重新赋值避免重新渲染和关系菜单         
        }
        this.handleSelectkeys = this.handleSelectkeys.bind(this)
    }
    UNSAFE_componentWillMount(){
        if(this.props.location.state){
            this.setState({
                openKeys:[this.props.location.state.parent,this.props.location.state.child ? this.props.location.state.child : '']
            })           
        }
          
      }
    componentDidMount(props,nextProps){
        var data = this.props.list;
        for(var i=0;i {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        let openList;
        if(this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                this.setState({
                    openKeys:openList                });
            }else{
                this.setState({
                    openKeys:openKeys                });
            }           
        }else{
            if(latestOpenKey&&latestOpenKey.length===3){
                openList = this.state.openKeys.filter((e)=>{
                    return e.length!==3;
                })
                openList.push(latestOpenKey);
                this.setState({
                    openKeys:openList[1] ? openList : [openList[0],openList[2]]
                });
            }else{
                this.setState({
                    openKeys: latestOpenKey ? [latestOpenKey] : [],
                });
            }            
        }
    }
    render(){
        const data = this.props.list;
        var html = [];
        for(var i=0;i<data.length;i++){
            if(data[i].children){
                var li = []
                for(var j=0;j<data[i].children.length;j++){
                    var liData = data[i].children[j];
                    if(liData.children){
                        var oli = [];
                        for(var k=0;k<liData.children.length;k++){
                            oli.push(
                                <Menu.Item key={liData.children[k].url}>
                                    <Link to={
                                        {
                                            pathname:liData.children[k].url,
                                            state:{//三级菜单下传openKeys传两个值，展开两级
                                                parent:this.state.openKeys[0],
                                                child:this.state.openKeys[1]
                                            }
                                        }
                                    }>
                                        <span>{liData.children[k].text}</span>
                                    </Link>
                                </Menu.Item>
                            )
                        }
                        var oul = <SubMenu key={liData.id} title={<span>{liData.iconCls && <Icon type={liData.iconCls} />}<span>{liData.text}</span></span>}>{oli}</SubMenu>;
                        li.push(oul);
                    }else{
                        li.push(
                            <Menu.Item key={liData.url}>
                                <Link to={
                                    {
                                        pathname:liData.url,
                                        state:{//二级菜单下openKeys传一个值，展开一级
                                            parent:this.state.openKeys[0],
                                            // child:this.state.openKeys[1] ? this.state.openKeys[1] : &#39;&#39;
                                        }
                                    }
                                    
                                    } >
                                    {liData.iconCls && <Icon type={liData.iconCls} />}
                                    <span>{liData.text}</span>
                                </Link>
                            </Menu.Item>
                        );
                    }
                }
                var ul = <SubMenu key={data[i].id} title={<span>{data[i].iconCls && <Icon type={data[i].iconCls} />}<span>{data[i].text}</span></span>}>{li}</SubMenu>;
                html.push(ul);
            }else{
                html.push(
                    <Menu.Item key={data[i].url}>
                        <Link to={                           
                            {
                                pathname:data[i].url,
                                state:{//一级菜单下传空值，不展开菜单栏
                                    parent:&#39;&#39;
                                }
                            }
                            } >
                            {data[i].iconCls && <Icon type={data[i].iconCls} />}
                            <span>{data[i].text}</span>
                        </Link>
                    </Menu.Item>
                )
            }
        }
        return (
            
                {html}
            
        )
    }}export default withRouter(Menus);

Sidebar data menu.js

const list = [
  {
      "id":1,
      "text":"检查清单",
      "state":"closed",
      "iconCls":"home",
      "children":[
          {
              "id":100,
              "text":"按月检查",
              "checked":false,
              "state":"closed",
              "iconCls":"",
              "url":"/platform/check/month"
          },
          {
              "id":101,
              "text":"按年检查",
              "checked":false,
              "state":"closed",
              "iconCls":"",
              "url":"/platform/check/year"
          }
      ]   
  },
  {
      "id":2,
      "text":"数据预览导出",
      "iconCls":"laptop",
      "state":"closed",
      "checked":true,
      "children":[
          {
              "id":200,
              "text":"做的书",
              "iconCls":"",
              "state":"closed",
              "checked":true,
              "children":[
                  {
                      "id":20001,
                      "text":"2018做的书",
                      "iconCls":" ",
                      "url":"/platform/export/makeBook/2018"
                  },
                  {
                      "id":20002,
                      "text":"2019做的书",
                      "iconCls":" ",
                      "url":"/platform/export/makeBook/2019"
                  },
                  {
                      "id":20003,
                      "text":"2020做的书",
                      "iconCls":" ",
                      "url":"/platform/export/makeBook/2020"
                  }
              ]
          },
          {
              "id":201,
              "text":"财务收入",
              "iconCls":"",
              "state":"closed",
              "checked":true,
              "children":[
                  {
                      "id":20101,
                      "text":"2018财务收入",
                      "iconCls":" ",
                      "url":"/platform/export/GMV/2018"
                  },
                  {
                      "id":20102,
                      "text":"2019财务收入",
                      "iconCls":" ",
                      "url":"/platform/export/GMV/2019"
                  },
                  {
                      "id":20103,
                      "text":"2020财务收入",
                      "iconCls":" ",
                      "url":"/platform/export/GMV/2020"
                  },
              ]
          },
          {
              "id":202,
              "text":"财务支出",
              "iconCls":"",
              "state":"closed",
              "checked":true,
              "children":[
                  {
                      "id":20201,
                      "text":"2018财务支出",
                      "iconCls":" ",
                      "url":"/platform/export/expend/2018"
                  },
                  {
                      "id":20202,
                      "text":"2019财务支出",
                      "iconCls":" ",
                      "url":"/platform/export/expend/2019"
                  },
                  {
                      "id":20203,
                      "text":"2020财务支出",
                      "iconCls":" ",
                      "url":"/platform/export/expend/2020"
                  },
              ]
          },
         ]
  },
 ]class SiderNav extends React.Component {
  render() {
    return (   
      <Sider  width={230}  breakpoint  className="AdminSider">
          <Menus list={list} />
      </Sider>
    )
  }}```

推奨学習: 「react ビデオ チュートリアル 」

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

関連ラベル：

react

ソース：php.cn

前の記事：arrow 関数は es6 にありますか? 次の記事：Reactに外部メソッドを導入する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• インターフェース設計書を共有する際の12の注意点
  2023-04-24 11:00:01
• フロントエンドがバッテリー情報を取得する方法について話しましょう
  2023-04-24 10:55:51
• Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明
  2023-04-24 10:52:44
• 8 つのデモを使用して Go 言語の defer の 5 つの主要な機能を理解する
  2023-04-23 17:40:51
• file_get_contents と getimagesize の時間のかかる深刻な問題の詳細な説明
  2023-04-23 17:38:02
• PHP 無料確認コードを共有する (コード付き)
  2023-04-23 17:34:02
• Linux での yum の意味
  2023-04-23 10:15:45
• Linux jbossとは何ですか
  2023-04-23 10:10:52
• Redis の多次元ランキングのアイデアを共有する
  2023-04-21 16:01:59
• ある記事では、php+roadrunner による grpc サーバーの実装について詳しく説明しています。
  2023-04-21 15:58:01

最新の問題

Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...

から 2024-04-06 21:28:37

0

1

2257

Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...

から 2024-04-06 16:54:10

0

1

410

0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...

から 2024-04-06 16:29:50

0

2

490

無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...

から 2024-04-06 16:25:39

0

1

346

React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...

から 2024-04-06 13:39:24

0

1

410

関連トピック

詳細>

• Javaにおけるサーバーレットの役割
• PythonでExcelの列を読み取る方法
• データベースビューとテーブルの違いは何ですか
• ベースタグの役割
• C# チュートリアル
• デゼンダーの用途は何ですか?
• 2 台のコンピュータ間でプリンタを共有する方法
• UpdatePanelの使用法