分享
三行代码  ›  专栏  ›  技术社区  ›  Logan B

在数组映射中使用条件逻辑?

  •  0
  • Logan B  · 技术社区  · 5 天前

    好的,所以我使用expressreact视图作为模板引擎,我目前正在尝试制作一个有效的breadcrumb。在每条路线上,我都会经过一个名为“面包屑”的道具,它是应用程序上当前位置的数组。该数组如下所示:

    [
        {
            text: "Home",
            href:"/",
            active: false
        }, 
        {
            text: "Step2",
            href:`/page`,
            active: true
        }
    ]
    

    显然,这可能需要多个步骤。最后一步是您所在的页面,因此active设置为true。这就是我的问题所在。为了在页面上呈现这个,我将这个数组映射到JSX,如下所示:

    const Breadcrumb = props => {
        return (
            <ol class="breadcrumb">
                {props.crumb.map(crumb =>
                   <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>
                )}
            </ol>
        )
    }
    

    这段代码工作得很好,但是活动页面上应该有类“active”,而不应该有“a”标记。所以我需要做的是映射这个数组来检查激活:真值然后映射另一个元素。我希望这有道理。

    2 回复  |  直到 5 天前
        1
  •  1
  •   Shivanshu Gupta    5 天前

    const Breadcrumb = props => {
        return (
            <ol class="breadcrumb">
                {props.crumb.map(crumb =>
                   crumb.active ? <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li> : <li class="breadcrumb-item">{crumb.text}</li>
                )}
            </ol>
        )
    }
    

    如果只想显示活动链接,则可以使用:

     const Breadcrumb = props => {
            return (
                <ol class="breadcrumb">
                    {props.crumb.filter(item => item.active).map(crumb =>
                       <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>
                    )}
                </ol>
            )
        }
    

    crumb.active ,因此它将返回true或false,并在此基础上返回相应的元素。

        2
  •  1
  •   Ravi    5 天前

    这是你想要的吗

    const Breadcrumb = props => {
        return (
            <ol class="breadcrumb">
                {props.crumb.map(crumb => {
                    if(crumb.active)
                        return <li class="breadcrumb-item active"></li>
                    else
                        return <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>               
                })}
            </ol>
        )
    }