Question

我的目标是在react js中创建一个面包屑组件。我在我的应用程序中使用了Ant Design，但在使用过程中却遇到了一些问题。

在Ant Design的文档中，我找到了创建动态面包屑的解决方案，但找不到如何应用代码。

使用Ant设计，我构建了下一个应用程序：

    import React from "react";
    import {Link, BrowserRouter, Route} from "react-router-dom";
    import {Breadcrumb} from 'antd';

    //from here starts the code from Ant Design Documentation
    const routes = [
        {
            path: 'index',
            breadcrumbName: 'home',
        },
        {
            path: 'first',
            breadcrumbName: 'first',
            children: [
                {
                    path: '/general',
                    breadcrumbName: 'General',
                },
                {
                    path: '/layout',
                    breadcrumbName: 'Layout',
                },
                {
                    path: '/navigation',
                    breadcrumbName: 'Navigation',
                },
            ],
        },
        {
            path: 'second',
            breadcrumbName: 'second',
        },
    ];

    function itemRender(route, params, routes, paths) {
        const last = routes.indexOf(route) === routes.length - 1;
        return last ? (
            <span>{route.breadcrumbName}</span>
        ) : (
            <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        );
    }
return <Breadcrumb itemRender={itemRender} routes={routes} />;
    //here is the end of the code from Ant Design

    function App() {
        return (
            <div>
                <p>here i want to render my breadcrumb</p>
            </div>
        );
    }

    export default App;

此外，return语句位于函数外部，因此我得到了错误。

如何使用此实现创建面包屑，以及如何在组件中呈现itemRender函数，我应该从哪里获得这些参数itemRender(route, params, routes, paths)？

Answer 1

您需要在应用程序正文中使用Breadcrum组件

function App() {
  return (
      <div>
        <Breadcrumb itemRender={itemRender} routes={routes} />
      </div>
  );
}

在React JS中的组件内部渲染函数

1 个答案: