React JS / Material UI — хлебные крошки с динамическими идентификаторами между путями

Я новичок в реагировании и пытаюсь создать хлебные крошки с динамическими идентификаторами между путем.

Мои реквизиты для компонента:

const breadcrumbsData = {
  path: "facilities/65743/facilitycontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/:facilityId": ":facilityId",
    "/facilities/:facilityId/facilitycontact": "Facility Contact"        
  }
};

код, который отображает хлебные крошки,

<Breadcrumbs arial-label = "Breadcrumb">
  {paths.map((path, index) => {
    const url = "/" + paths.slice(0, index + 1).join("/");
    const last = index === paths.length - 1;
    return last ? (
      <Typography color = "inherit"> {breadcrumbNameMap[url]} </Typography>
    ) : (
      <Link to = {url}>{breadcrumbNameMap[url]}</Link>
    );
  })}
</Breadcrumbs>

Я пробовал разные подходы, но не мог понять, как это сделать. Он отлично работает без идентификаторов между путями. Например

const breadcrumbsData = {
  path: "facilities/facilityprofile/facilitycontact/workcontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/facilityprofile": "Facility Profile",
    "/facilities/facilityprofile/facilitycontact": "Facility Contact"
  }
};

P:S - Пробовал «сопоставить», но никуда не пошел с этим, и мой вариант использования - я вручную передаю путь из реквизита.

Вот полный код

Кодовая песочница — хлебные крошки с использованием пользовательского интерфейса реакции и материала

reactjs react-router material-ui breadcrumbs

11.03.2019 19:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 753

Ответы 1

Я не совсем уверен, зачем вам это нужно, но вот специальное решение. Не используйте breadcrumbsData.breadcrumbNameMap напрямую, чтобы найти имя. Предварительно обработайте его и сгенерируйте карту с помощью простой замены строки.

Например, определите утилиту для предварительной обработки карты:

generateNameMap = (id, idKey, map) => { 
  // takes the actual id i.e. '65743', 
  // the template key that need to be replaced with i.e. ':facilityId'
  // and the initial map i.e. breadcrumbsData.breadcrumbNameMap
  const clone = {};
  Object.keys(map).forEach(k => {
    clone[k.replace(idKey, id)] = map[k].replace(idKey, id) // replace the template in both key and value with actual id
  })
  return clone;
}

Теперь определите свой breadcrumbNameMap, чтобы использовать эту утилиту, а не использовать breadcrumbsData.breadcrumbNameMap напрямую:

const breadcrumbNameMap = this.generateNameMap(paths[1], ':facilityId', breadcrumbsData.breadcrumbNameMap);

Вот демо:

const generateNameMap = (id, idKey, map) => {
    const clone = {};
    Object.keys(map).forEach(k => {
      clone[k.replace(idKey, id)] = map[k].replace(idKey, id)
    })
    return clone;
}


const breadcrumbNameMap = generateNameMap('65743', ':facilityId', {
        "/facilities": "Facility",
        "/facilities/:facilityId": ":facilityId",
        "/facilities/:facilityId/workcontact": "Facility Contact",
        "/facilities/facilityprofile/facilitycontact/": "Work Contact"
});
console.info(breadcrumbNameMap);

11.03.2019 21:13

Другие вопросы по теме

Реагирующий маршрутизатор нажимает одну и ту же ссылку более одного раза и кнопку «Назад» в браузере

Ant Design: проблема с DatePicker

Дочернее приложение, так как пакет npm не перерисовывается

Как использовать реагирующий маршрут на героку?

Проблема с маршрутизацией при запуске производственной сборки на локальном хосте

Возникли проблемы с пониманием пути, переданного для реагирования маршрутизатора

Как навигационная панель и нижний колонтитул фиксируются в реакции

Почему мой маршрутизатор React загружает только маршрут по умолчанию?

Как открыть новую страницу с помощью кнопки в реакции?

Почему мой реактивный маршрутизатор не работает? URL-адрес изменяется при нажатии, но не отображается в DOM

React JS / Material UI — хлебные крошки с динамическими идентификаторами между путями

Ответы 1

Другие вопросы по теме

Похожие вопросы