Bagaimana untuk melaksanakan menu tiga peringkat dalam tindak balas

Cara melaksanakan menu tiga peringkat secara bertindak balas: 1. Kaedah untuk mencipta dan mengembangkan menu induk tiga peringkat ialah "onOpenChange = (openKeys) => {...}" 2. Melalui "handleSelectkeys(e) {...}" untuk menetapkan keadaan yang dipilih; 3. Hasilkan bar sisi melalui "oli.push(

<🎜. >

Persekitaran pengendalian tutorial ini: sistem Windows 10, react versi 18.0.0, komputer Dell G3

Cara melaksanakan menu tiga peringkat dalam bertindak balas? + antd hanya mengembangkan bar sisi bar menu induk (bar menu tiga peringkat)

Jana sidebar

Sidebar component Menu.js Kod penuh

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] : [],
                });
            }            
        }
    }</p>
<p><strong></strong>Sidebar menu data .js</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
             }); 
        }       
    }

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

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>
                )
            }
        }

"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menu tiga peringkat dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn