ReactJS semantic 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 中使用 Fragments 对元素进行分组，而无需向 DOM 添加额外的元素。

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

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

ReactJS semantic ui 动态生成的 Breadcrumb 菜单

ReactJS semantic ui dynamically generated Breadcrumb menu

breadcrumbs

reactjs

semantic-ui