關於 antd 之 layout.sider 使用說明請移步這裡：
上述**完全實現了 sidebar，美中不足是：在封裝 matchpath 方法時，需要全域性宣告乙個 flag 變數來控制選單。這會造成該方法與該元件的強耦合，不方便共用。import from 'antd';import from '@ant-design/icons';
import from "react";
import from "react-router-dom";
import cookies from "js-cookie";
import "./index.less"
const = menu;
const = layout
const sidebar = (props) => = props;
const superadmin = () =>
const username = cookies.get("username");
const issuperadmin = superadmin().includes(username);
const = location;
const [collapsed, setcollapsed] = usestate(false);
const [zoo, setzoo] = usestate("");
let selectedkeys = , openkeys = ;
useeffect(()=>, [globalcurrentzoo]);
const menulist = [/fish`,
rule: /\/animal\/[\s\s]+\/fish\/?$/,
},/birds/chicken/list`,
rule: /\/animal\/[\s\s]+\/birds\/chicken\/+/,
},/birds/duck/list`,
rule: /\/animal\/[\s\s]+\/birds\/duck\/+/,
}]},/amphibians`,
rule: /\/animal\/[\s\s]+\/amphibians\/?$/,
},/reptiles`,
rule: /\/animal\/[\s\s]+\/reptiles\/?$/,
}];const managermenus = () => /mammals/cat`,
rule: /\/animal\/[\s\s]+\/mammals\/cat\/?$/,
},/mammals/dog`,
rule: /\/animal\/[\s\s]+\/mammals\/dog\/?$/,}]}
)) : ("")}
} let flag = false;
const matchpath = (arr, path, defaultres={}) =>
for (let i = 0; i < arr.length; i++)
}continue;
}else
}else
}flag = true;
break;}}
if (item.submenus && array.isarray(item.submenus)) )
res = } }
return res;
} managermenus();
const = matchpath(menulist, pathname);
key && (selectedkeys = [key]);
parentkey && (openkeys = [parentkey]);
const oncollapse = collapsed => ;
return (
)})}
) : ()})
})});
}export default sidebar;
於是我對 matchpath 方法做了優化：
優化後，實現了無需全域性宣告乙個 flag 變數來控制選單，可是這樣會帶來乙個負面效果：雖然最終的 selectedkeys 和 openkeys 的值是對的，但是 menu 拿到正確的 openkeys 後，defaultopenkeys 卻是失效的，不知為何，若有幸被大佬看到，求支點迷津(o^^o)。const matchpath = (arr, path, defaultres={}) =>for (let i = 0; i < arr.length; i++)
}continue;
}else
}else
}break;}}
if (item.submenus && array.isarray(item.submenus)) )
res = } }
return res;
}
左側選單，滾動條實現：
給整個選單的容器加上以下樣式：
.sidebarreact的antd左側選單及重新整理選中狀態
資料格式 getmenunodes menulist else render 當重新整理頁面時，預設選中選單項的設定，因為menu的selectedkeys屬性儲存key值，即我們使用的path路徑，我們知道this.props.location.pathname可以取到path的路徑，但是當前le...
antd實現按需載入
在使用react開發專案，使用第三方ui庫antd時，引入antd檔案，每次載入時，把一些不需要的也載入上了，這是沒有必要的，所以就需要配置一下antd檔案，是她能夠按照需要引入對應的檔案，寫次文章，作為記錄，方便日後自己再次使用方便。第一步 自定義配置 第二步 配置json檔案 package.j...
el menu實現左側選單欄
v for迴圈實現二級選單欄 data 開啟選單欄路由模式 設定屬性 router router屬性的預設值是false，設定的時候可以直接新增就好 或者繫結屬性，把值設為true 注意需要繫結，前面加 router true 重新整理後保持當前頁選單欄路由高亮 繫結屬性 default activ...