利用React高阶组件实现一个面包屑导航的示例

// 这里展示的是 react-router4 的route示例
let routes = [
 {
  breadcrumb: '一级目录',
  path: '/a',
  component: require('../a/index.js').default,
  items: [
   {
    breadcrumb: '二级目录',
    path: '/a/b',
    component: require('../a/b/index.js').default,
    items: [
     {
      breadcrumb: '三级目录1',
      path: '/a/b/c1',
      component: require('../a/b/c1/index.js').default,
      exact: true,
     },
     {
      breadcrumb: '三级目录2',
      path: '/a/b/c2',
      component: require('../a/b/c2/index.js').default,
      exact: true,
     },
   }
  ]
 }
]

// 理想中的面包屑组件
// 展示格式为 a / b / c1 并都附上链接
const BreadcrumbsComponent = ({ breadcrumbs }) => (
 <div>
  {breadcrumbs.map((breadcrumb, index) => (
   <span key={breadcrumb.props.path}>
    <link to={breadcrumb.props.path}>{breadcrumb}</link>
    {index < breadcrumbs.length - 1 && <i> / </i>}
   </span>
  ))}
 </div>
);

/**
 * 以递归的方式展平react router数组
 */
const flattenRoutes = arr =>
 arr.reduce(function(prev, item) {
  prev.push(item);
  return prev.concat(
   Array.isArray(item.items) "htmlcode">

export const getBreadcrumbs = ({ flattenRoutes, location }) => {
 // 初始化匹配数组match
 let matches = [];

 location.pathname
  // 取得路径名，然后将路径分割成每一路由部分.
  .split('"htmlcode">

const getBreadcrumb = ({ flattenRoutes, curSection, pathSection }) => {
 const matchRoute = flattenRoutes.find(ele => {
  const { breadcrumb, path } = ele;
  if (!breadcrumb || !path) {
   throw new Error(
    'Router中的每一个route必须包含 `path` 以及 `breadcrumb` 属性'
   );
  }
  // 查找是否有匹配
  // exact 为 react router4 的属性，用于精确匹配路由
  return matchPath(pathSection, { path, exact: true });
 });

 // 返回breadcrumb的值，没有就返回原匹配子路径名
 if (matchRoute) {
  return render({
   content: matchRoute.breadcrumb || curSection,
   path: matchRoute.path,
  });
 }

 // 对于routes表中不存在的路径
 // 根目录默认名称为首页.
 return render({
  content: pathSection === '/' "htmlcode">

/**
 *
 */
const render = ({ content, path }) => {
 const componentProps = { path };
 if (typeof content === 'function') {
  return <content {...componentProps} />;
 }
 return <span {...componentProps}>{content}</span>;
};



有了这些功能函数，我们就能实现一个能为包裹组件传入当前所在路径以及路由属性的 React 高阶组件了。传入一个组件，返回一个新的相同的组件结构，这样便不会对组件外的任何功能与操作造成破坏。


const BreadcrumbsHoc = (
 location = window.location,
 routes = []
) => Component => {
 const BreadComponent = (
  <Component
   breadcrumbs={getBreadcrumbs({
    flattenRoutes: flattenRoutes(routes),
    location,
   })}
  />
 );
 return BreadComponent;
};
export default BreadcrumbsHoc;



调用这个高阶组件的方法也非常简单，只需要传入当前所在路径以及整个 react router 生成的 routes 属性即可。

至于如何取得当前所在路径，我们可以利用 react router 提供的 withRouter 函数，如何使用请自行查阅相关文档。

值得一提的是，withRouter 本身就是一个高阶组件，能为包裹组件提供包括 location 属性在内的若干路由属性。所以这个 API 也能作为学习高阶组件一个很好的参考。


withRouter(({ location }) =>
 BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
);



Q&A


如果react router 生成的 routes 不是由自己手动维护的，甚至都没有存在本地，而是通过请求拉取到的，存储在 redux 里，通过 react-redux 提供的 connect 高阶函数包裹时，路由发生变化时并不会导致该面包屑组件更新。使用方法如下：


function mapStateToProps(state) {
 return {
  routes: state.routes,
 };
}

connect(mapStateToProps)(
 withRouter(({ location }) =>
  BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
 )
);




这其实是 connect 函数的一个bug。因为 react-redux 的 connect 高阶组件会为传入的参数组件实现 shouldComponentUpdate 这个钩子函数，导致只有 prop 发生变化时才触发更新相关的生命周期函数(含 render)，而很显然，我们的 location 对象并没有作为 prop 传入该参数组件。
官方推荐的做法是使用 withRouter 来包裹 connect 的 return value，即


withRouter(
 connect(mapStateToProps)(({ location, routes }) =>
  BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
 )
);



其实我们从这里也可以看出，高阶组件同高阶函数一样，不会对组件的类型造成任何更改，因此高阶组件就如同链式调用一样，可以任意多层包裹来给组件传入不同的属性，在正常情况下也可以随意调换位置，在使用上非常的灵活。这种可插拔特性使得高阶组件非常受 React 生态的青睐，很多开源库里都能看到这种特性的影子，有空也可以都拿出来分析一下。

            
           
            上一篇：详解Howler.js Web音频播放终极解决方案

            下一篇：vue中watch和computed的区别与使用方法