使用 React Link 或标签 href 进行 JSX 格式化？

Question

我正在尝试映射一个数组，其中每个元素都成为一个单独的链接，由大于符号 > 分隔

所以[hello, world, foo, bar] 的数组变成了

hello > world > foo > bar

如何在 JSX 中正确执行此操作？我正在尝试类似的东西

const path = ["Hello", "World", "Foo", "Bar"]

return (
    <div className='breadcrumbs'>
    {props.user ? 
        path.map((entry) => <span><Link>{entry}</Link>&gt;</span>) : <></> }
    </div>
);

使用这个 CSS：

.breadcrumbs {
    display: flex;
    flex-direction: row;
}

但我得到了这个结果：

我怎样才能让一切保持一致？

Answer 1

这可能是因为您的Link 组件呈现了block level element。因此强制> 转到下一行。

你可以给你的内部跨度一个类名，然后给它分配display:flex的属性。这将确保它保持连续。

在通过map 渲染时，请确保为您的元素提供适当的唯一key。

const path = ["Hello", "World", "Foo", "Bar"]

return (
    <div className='breadcrumbs'>
    {props.user ? 
        path.map((entry,index) => <span key={`breadcrumb-item-${index}`} className="breadcrumb-item"><Link>{entry}</Link>&gt;</span>) : <></> }
    </div>
);

.breadcrumb-item{
 display:flex;
 gap:2px;
 align-items:center;
}