在 react js 的组件内渲染一个函数

Question

My target is to create a breadcrumb component in react js. I used Ant Design in my App, but I have some issues with a parth of it.

In the documentation of Ant Design i found a solution for creating dynamic breadcrumbs, but can't find out how to apply the code.

Using, Ant design i built the next app:

 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;

Also, the return statement is located outside of the function and i get error due of this.

How to create, using this implementation, a breadcrumb, and how to render itemRender function inside my component, and from where should i get these params itemRender(route, params, routes, paths) ?

Answer 1

You need to use Breadcrum component in App body

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