有条件的渲染同级组件

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()}

Answer 2

在这种情况下，子对象是函数的引用，您可以通过在render方法中进行条件处理来解决此问题。代替

{this.renderSecondaryNavigation}

您可以这样做：

{condition && (<div>Hecka Hopeful</div>);}

或者只是执行该函数。

{this.renderSecondaryNavigation()}