В этом примере у меня есть нарушение работы https://codesandbox.io/s/bare-bones-example-kcdrt?file=/index.js. Проблема в том, что рендер отображает все элементы в одной строке без интервала ....

0
BronzeJamie 3 Мар 2021 в 19:11

1 ответ

Лучший ответ

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

  • Добавьте интервал при рендеринге каждой хлебной крошки
const Breadcrumbs = withBreadcrumbs()(({ breadcrumbs }) => (
  <React.Fragment>
    {breadcrumbs.map(({ breadcrumb }) => <span>{breadcrumb} &gt;</span>)}
  </React.Fragment>
));

Ключевым моментом здесь является отрисовка символа &gt; и обернутого тега span.

  • Используйте псевдоселекторы CSS, чтобы добавить пробел и разделитель к каждому элементу навигации.
const Breadcrumbs = withBreadcrumbs()(({ breadcrumbs }) => (
  <React.Fragment>
    {breadcrumbs.map(({ breadcrumb }) => <span className="crumb">{breadcrumb}</span>)}
  </React.Fragment>
));
.crumb::after {
  padding-left: 0.625rem;
  content: '>';
}

1
Brad C. 3 Мар 2021 в 16:19