如何在 React JSX 中使用 if 语句 loop/map

Question

我正在尝试根据 if 语句在 React 组件中输出某些 HTML 的两个不同版本，这是我认为它应该看起来的样子，但语法不正确。如果 breadCrumbLink.IsActive 的值为真，我正在尝试添加“活动”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>
}

))}

Answer 1

您不需要有条件地呈现。在 active 属性中使用条件（如果需要，在 className 中使用）：

{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => 
    (
        <Breadcrumb.Item key={breadCrumbLink.Id} className="active" active={breadCrumbLink.IsActive}>
            {breadCrumbLink.LinkText}
        </Breadcrumb.Item>
    )
)}

如何在 React JSX 中使用 if 语句 loop/map

How to use if statement inside React JSX loop/map

reactjs

react-bootstrap