antd的breadcrumb组件itemRender是如何调用的？

问题描述

问 题

1. 问题：使用Antd的breadcrumb组件，使用的是browserHistory。按照文档里说的，使用itemRender。
   使用的时候itemRender没有调用this.itemRender，我也不清楚itemRender需要的4个参数是从哪里获取的。

   想请问一下itemRender的正确用法。

2. 代码贴上

class AppHeader extends Component {
  constructor(props) {
    super(props)
    this.itemRender = this.itemRender.bind(this)
  }

  itemRender(route, params, routes, paths) {
    console.log(route)
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
  }

  render() {
    return (
      <Header className="header">
        <div className="logo"/>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          style={{lineHeight: '64px'}}
        >
          <Menu.Item key="logout">
            <Link to="/">登出</Link>
          </Menu.Item>
          <Menu.Item key="breadcrumb">
            <Breadcrumb itemRender={itemRender}/>
          </Menu.Item>

        </Menu>
      </Header>
    );
  }
}

解决方案

需要在路由中配合使用：https://ant.design/components...

---

另外，现有的逻辑需要依赖 route.breadcrumbName 才会展示，不是很合理。我主干上修改了：https://github.com/ant-design...

这篇关于antd的breadcrumb组件itemRender是如何调用的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！