Maison > Article > interface Web > Comment implémenter un menu à trois niveaux en réaction
Comment implémenter un menu à trois niveaux en réaction
- 藏色散人original
- 2023-01-19 10:59:20836parcourir
Comment implémenter un menu à trois niveaux dans React : 1. La méthode pour créer et développer le menu parent à trois niveaux est "onOpenChange = (openKeys) => {...}" 2. Via "handleSelectkeys(e); ){... }" définissez l'état sélectionné ; 3. Générez la barre latérale via "oli.push(
L'environnement d'exploitation de ce tutoriel : Windows10 système, version React18. .0.0, ordinateur Dell G3
Comment implémenter un menu à trois niveaux avec
react + et pour étendre uniquement la barre latérale d'une barre de menu parent (barre de menu à trois niveaux)
J'ai rencontré une exigence au travail. La barre latérale à trois niveaux ne peut développer qu'une barre de menu parent pour garder la page simple et améliorer l'expérience utilisateur. J'ai également cherché en ligne pendant longtemps et je n'ai rien trouvé qui réponde pleinement. les exigences, je l'ai donc combiné avec l'écriture d'autres personnes
Comment étendre le menu parent à trois niveaux
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>Définir l'état sélectionné</strong></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
});
}
}
Code complet du composant de la barre latérale Menu.js
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] : ''
}
}
} >
{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:''
}
}
} >
{data[i].iconCls && <Icon type={data[i].iconCls} />}
<span>{data[i].text}</span>
</Link>
</Menu.Item>
)
}
}
. Sidebar data 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] : ''
}
}
} >
{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:''
}
}
} >
{data[i].iconCls && <Icon type={data[i].iconCls} />}
<span>{data[i].text}</span>
</Link>
</Menu.Item>
)
}
}
return (
)
}}export default withRouter(Menus);
Apprentissage recommandé : "Tutoriel vidéo React
"Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La fonction flèche appartient-elle à es6 ?Article suivant：La fonction flèche appartient-elle à es6 ?