ReactJS семантическое UI динамически генерируется меню Breadcrumb

Question

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

breadCrumbs() {
    return (
        <Breadcrumb>
            {this.state.breadCrumbs.map((element) =>(
                <Breadcrumb.Section key={uuidv1()} link>{element}</Breadcrumb.Section>
                <Breadcrumb.Divider />
            ))}
        </Breadcrumb>
    )
}

Приведенный выше код не будет работать, потому что мне нужно обернуть Breadcrum.Section и Breadcrumb.Divider в другомэлемент.Я попытался использовать div, но затем элементы div укладываются друг на друга.Как я могу сделать реакцию счастливой и обернуть компоненты, не портя макет?

Answer 1

Вы можете использовать Фрагменты в React для группировки элементов без добавления дополнительных элементов в DOM.

В вашем случае вы можете заключить фрагмент и разделитель в фрагмент без использования <div>

<React.Fragment>
    <Breadcrumb.Section key={uuidv1()} link>{element}</Breadcrumb.Section>
    <Breadcrumb.Divider />
<React.Fragment />