时间戳

首页 > 解决方案 > ReactJS语义ui动态生成面包屑菜单

reactjs - ReactJS语义ui动态生成面包屑菜单

问题描述

我想动态创建一个面包屑菜单，但我遇到了问题。

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

上面的代码不起作用，因为我需要将 Breadcrumb.Section 和 Breadcrumb.Divider 包装在另一个元素中。我尝试使用div，但随后 div 一个在另一个之上。如何在不弄乱布局的情况下做出反应并包装组件？

标签： reactjssemantic-uibreadcrumbs

解决方案

您可以在 React 中使用Fragments对元素进行分组，而无需向 DOM 添加额外的元素。

在您的情况下，您可以将 Section 和 Divider 包装在片段中，而无需使用<div>

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

推荐阅读