React 16.x折騰記 - (9) 基於Antd+react-router-breadcrumbs-hoc封裝一個小巧的麪包屑組件

前言

沒有什麼技術難度,只是比官方的文檔多了一丟丟的判斷和改造;

用了react-router-breadcrumbs-hoc,約定式和配置式路由路由皆可用,

只要傳入的符合規格的數據格式便可

基礎環境

React 16.4/UmiJS 2.2/Antd 3.x/ react-router-breadcrumbs-hoc 2.x: API簡潔易懂

效果圖

• 非antd風格

• antd風格

源碼及實現

暴露的props:

• data: 麪包屑的映射關係,數組(react-router-breadcrumbs-hoc要求的那種)

好比 : const routes = [{ path: '/', breadcrumb: '首頁' }];

如果不傳遞的狀況下,高階組件(react-router-breadcrumbs-hoc)會自動獲取路徑名字爲麪包屑的名字

Breakcrumbs

import Link from 'umi/link';
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
import { Breadcrumb, Badge, Icon } from 'antd';

// 更多配置請移步 https://github.com/icd2k3/react-router-breadcrumbs-hoc
const routes = [{ path: '/', breadcrumb: '首頁' }];

const Breadcrumbs = ({ data }) => {
  if (data && Array.isArray(data)) {
    const AntdBreadcrumb = withBreadcrumbs(data)(({ breadcrumbs }) => {
      return (
        <Breadcrumb separator={<Icon type="double-right" />} classNames="spread">
          {breadcrumbs.map((breadcrumb, index) => (
            <Breadcrumb.Item key={breadcrumb.key}>
              {breadcrumbs.length - 1 === index ? (
                <Badge status="processing" text={breadcrumb} />
              ) : (
                <Link
                  to={{
                    pathname: breadcrumb.props.match.url,
                    state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {},
                    query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {},
                  }}
                >
                  {breadcrumb}
                </Link>
              )}
            </Breadcrumb.Item>
          ))}
        </Breadcrumb>
      );
    });
    return <AntdBreadcrumb />;
  }
  const DefaultBreadcrumb = withBreadcrumbs(routes)(({ breadcrumbs }) => (
    <div>
      {breadcrumbs.map((breadcrumb, index) => (
        <span key={breadcrumb.key}>
          <Link
            to={{
              pathname: breadcrumb.props.match.url,
              state: breadcrumb.props.match.params ? breadcrumb.props.match.params : {},
              query: breadcrumb.props.location.query ? breadcrumb.props.location.query : {},
            }}
          >
            {breadcrumb}
          </Link>
          {index < breadcrumbs.length - 1 && <i> / </i>}
        </span>
      ))}
    </div>
  ));
  return <DefaultBreadcrumb />;
};

export default Breadcrumbs;


複製代碼

總結

如果直接返回高階組件,會拋出異常說您返回的是函數而非React.child,

解決就是我代碼那樣先緩存成組件,直接返回一個組件

有不對之處請留言,會及時修正,謝謝閱讀。