Bagaimana untuk melaksanakan menu tiga peringkat dalam tindak balas-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan menu tiga peringkat dalam tindak balas

藏色散人

Lepaskan： 2023-01-19 11:00:13

asal

850 orang telah melayarinya

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(

<🎜. > Bagaimana untuk melaksanakan menu tiga peringkat dalam tindak balas

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

Salin selepas log masuk

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

Salin selepas log masuk

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!