基于 Ant Design Pro 2.3.1 页面标签化展示的研究与实现

export interface ChildrenTab {
  /** tab's title */
  tab: string;
  key: string;
  content: React.ReactChildren | JSX.Element;
  /** used to indicate the tab need refresh */
  refresh?: boolean;
  /** used to extends tab's properties */
  [k: string]: any;
}

function addTab(newTab: ChildrenTab, activedTabs: ChildrenTab[]) {
  /**
   * filter 过滤路由 为 '/' 的 children
   * map 添加第一个 tab 不可删除
   */
  return [...activedTabs, newTab]
    .filter(item => item.path !== '/')
    .map((item, index) =>
      activedTabs.length === 0 && index === 0
        ? { ...item, closable: false }
        : { ...item, closable: true }
    );
}

function switchAndUpdateTab(
  activeIndex: number,
  tabName: string,
  extraTabProperties: any,
  children: any,
  activedTabs: ChildrenTab[]
) {
  const { path, content, refresh, ...rest } = activedTabs[activeIndex];
  activedTabs.splice(activeIndex, 1, {
    tab: tabName,
    content: refresh ? content : children,
    ...rest,
    ...extraTabProperties,
  });
  /** map 删除后的 activedTabs 长度为 1 时不可删除 */
  return activedTabs.map(item => (activedTabs.length === 1 ? { ...item, closable: false } : item));
}

export interface ChildrenTabsProps {
  activeKey: string;
  activeTitle: string;
  handleTabChange: (keyToSwitch: string, activedTabs: any[]) => void;
  extraTabProperties?: {};
  tabsConfig?: TabsProps;
  afterRemoveTab?: (removeKey: string, nextTabKey: string, activedTabs: ChildrenTab[]) => void;
  /** children is used to create tab, switch and update tab */
  children: React.ReactChildren;
}

interface ChildrenTabsState {
  activedTabs: ChildrenTab[];
  activeKey: string | null;
  nextTabKey: string | null;
}

// lifecycle
static getDerivedStateFromProps(props: ChildrenTabsProps, state: ChildrenTabsState) {
  const { children, activeKey, activeTitle, extraTabProperties } = props;
  const { activedTabs, nextTabKey } = state;
  // return state and set nextTabKey to `null` after delete tab
  if (nextTabKey) {
    return {
      activedTabs,
      activeKey: nextTabKey,
      nextTabKey: null,
    };
  }

  const activedTabIndex = _findIndex(activedTabs, { key: activeKey });
  // return state after switch or update tab
  if (activedTabIndex > -1) {
    return {
      activedTabs: switchAndUpdateTab(
        activedTabIndex,
        activeTitle,
        extraTabProperties,
        children,
        activedTabs
      ),
      activeKey,
    };
  }
  // return state to add tab
  const newTab = {
    tab: activeTitle,
    key: activeKey,
    content: children,
    ...extraTabProperties,
  };
  return {
    activedTabs: addTab(newTab, activedTabs),
    activeKey,
  };
}

// result: [pathID, pathName]
function getMetadataOfTab(
  childrenPathname: string,
  originalMenuData: MenuItem[],
): [string, string] {
  function getMetadata(
    path: string,
    menuData: MenuItem[],
    parent: MenuItem | null,
  ) {
    let result: [string, string]
    menuData.forEach((item) => {
      /** match prefix iteratively */
      if (pathToRegexp(`${item.path}(.*)`).test(path)) {
        if (!parent && item.name) {
          result = [item.path, item.name]
        } else if (parent && !parent.component && item.component && item.name) {
          /** create new tab if item has name and item's parant route has not component */
          result = [item.path, item.name]
        }
        /** get children pathID, pathName, shouldUpdate recursively */
        if (item.children) {
          result = getMetadata(path, item.children, item) || result
        }
      }
    })
    return result
  }
  return (
    getMetadata(childrenPathname, originalMenuData, null) || ['404', 'Error']
  )
}

const renderMenuData = transferMenuData(menuLoading, menuData)
const renderContent = () => {
  if (pageTabs) {
    if (renderMenuData) {
      return <PageTabs {...this.props} />
    }
    return <PageLoading />
  }
  return children
}