我正在尝试基于 if 语句在 React 组件中输出两个不同版本的 HTML，这就是我认为它应该看起来的样子，但语法不正确。如果 breadCrumbLink.IsActive 的值为 true，我正在尝试添加“活动”Breadcrumb.Item。
{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => (
if (breadCrumbLink.IsActive == true)
{
<Breadcrumb.Item key={breadCrumbLink.Id} className="active">
{breadCrumbLink.LinkText}
</Breadcrumb.Item active>
}
else
{
<Breadcrumb.Item key={breadCrumbLink.Id} className="active">
{breadCrumbLink.LinkText}
</Breadcrumb.Item>
}
))}
您不需要有条件地渲染。使用 active 属性内的条件（如果需要，也可以在 className 内）：
{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink =>
(
<Breadcrumb.Item key={breadCrumbLink.Id} className="active" active={breadCrumbLink.IsActive}>
{breadCrumbLink.LinkText}
</Breadcrumb.Item>
)
)}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句