时间戳

首页 > 解决方案 > React 中的路径名条件渲染

javascript - React 中的路径名条件渲染

问题描述

如何有条件地将组件添加到某些渲染pathname？

使用const pathname = this.props.location.pathnameI 识别当前pathname

然后我要使用的get页面slugs

const specialPages = get(this.props, 'data.allContentfulSpecialPages.edges')

然后我组织返回data的

const special = specialPages.map(({ node: page })=> (
     `/parent/${page.slug}`
))

这会将页面返回slugs为

["/parent/page1", "/parent/page2", "/parent/page3", "/parent/page4", "/parent/page5", "/parent/page6"]

现在一切似乎都很好，但是当我尝试添加时

let PageHeader;
    if (pathname !== special) {
      PageHeader =
      <Header/>;
    } else {
      PageHeader = null
    }

它不会删除中标识的<Header/>forpathnamespecial

我没有正确定义每个array？

编辑 - 我刚刚注意到这个问题，但不确定修复。 const special正在返回/parent/page1/parent/page2/parent/page3/parent/page4/parent/page5/parent/page6

添加时console.log(special)我收到

0:"/parent/page1"
1:"/parent/page2"
2:"/parent/page3"
3:"/parent/page4"
4:"/parent/page5"
5:"/parent/page6"
length:6
__proto__: Array(0)

所以我相信我需要map这些不同的。

标签： javascriptreactjs

解决方案

如果我理解正确，您希望根据路径名有条件地将组件添加到渲染中。我看到的一个常见模式是使用 and 运算符来检查您要检查的条件以及在需要时渲染的组件。像这样的东西。

{{ pathname !== special && <Header/> }}

如果条件不成立，则不会显示任何内容，如果条件成立，则会显示 Header 组件。

推荐阅读