vault backup: 2022-05-07 11:36:46

随时随地/管理后台中的 Tab 功能.md

@@ -6,7 +6,7 @@
 其实这个功能是可以不用 Context 实现，在 Tabs 组件内部使用 useEffect 也能实现相同的功能，但是我考虑到后边管理后台中或许会有别的页面也会需要用到类似的功能，就把它抽离出来方便复用。
 
 ## Tabs 添加路由
-有思路之后实现起来就很容易了，首先要实现一个 Context ，这个很简单直接跳过，然后实现一个路由的监听记录函数，这里用 useEffect 来做
+有思路之后实现起来就很容易了，首先要实现一个 Context ，这个很简单直接跳过，然后实现一个路由的监听记录函数，这里用 useEffect 来做，具体的逻辑可以看函数的注释
 
 ```javascript
 // react-router 的 useLocation Hook
@@ -23,11 +23,15 @@ const [tabList, setTabList] = useState(
 const addTabItem = (path, search) => {
 	// 判断路由是不是已经存在于 State 中，不存在就添加到 Tab 列表中
 	if (tabList.findIndex((item) => item.path === path) === -1) {
-		// 这里主要是为了保存
+		// 这里主要是为了保存 Tab 对应的路由名称，flattenArray 是数组扁平化函数
+		// 由于我的路由是用 useRoutes 实现的约定式路由，路由的名称也记录在里边
+		// 所以这里需要将其扁平化和找到对应的路由名称
 		const flattenList = flattenArray(routerConfig);
 		const routerIndex = flattenList.findIndex((item) => {
 			item.path === path
 		});
+
+		// 最后将其一起保存在 Tab 列表中
 		if (routerIndex !== -1) {
 			setTabList([
 				...tabList,
@@ -36,7 +40,7 @@ const addTabItem = (path, search) => {
 		}
 	}
 
-	// 这个是切换路由的函数，后面会写到
+	// 存在就切换路由，后面会写到
 	switchTab(path, search);
 };
 ```