Question

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

使用const pathname = this.props.location.pathname我确定了当前的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/>中标识的pathname的{{1}}

我是否在special？

中没有正确定义每个

编辑 - 我刚刚注意到了这个问题但不确定修复程序。 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)这些不同。

Answer 1

如果我理解正确，您希望根据路径名有条件地向渲染添加组件。我已经看到的一个常见模式是使用和运算符以及您要查看的条件以及需要时要渲染的组件。这样的事情。

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

如果条件不为真，则不显示任何内容，如果条件为真，则显示Header组件。

React中的路径名条件呈现

1 个答案: