antd 實現 sidebar 左側選單 記

關於 antd 之 layout.sider 使用說明請移步這裡：

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 方法做了優化：

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

左側選單，滾動條實現：

給整個選單的容器加上以下樣式：

.sidebar

react的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...