有条件的渲染同级组件

Question

我有一个包含多个组件的页面组件。 如果在关联的数据数组中找到两个或多个对象，我只想呈现SecondaryNavigation组件。 我的结构如下：

<main>
  <MainNavigation>
  <Hero>
  <SecondaryNavigation>
  other stuff...
<main>

我尝试创建一个将检查数据并返回组件的函数，如下所示：

renderSecondaryNavigation() {
  return <div>Hecka Hopeful</div>;
}

并将其添加到返回对象：

<main>
  <MainNavigation>
  <Hero>
  {this.renderSecondaryNavigation}
      other stuff...
<main>

在我跳入逻辑之前，我先运行代码来查看它是否可以呈现，然后我得出了“警告：函数作为React子代无效”。

有没有一种优雅的方法可以做到这一点？ 谢谢！

Answer 1

您不是为了获取返回的标记而调用函数，而是仅传递了对函数对象的引用

更改

{this.renderSecondaryNavigation}

至

{this.renderSecondaryNavigation()}