时间戳

首页 > 解决方案 > 有条件地渲染兄弟组件

javascript - 有条件地渲染兄弟组件

问题描述

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

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

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

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

并将其添加到返回对象：

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

在我跳入逻辑之前，我运行了代码以查看它是否会呈现，我最终得到“警告：函数作为 React 子级无效”。

有没有一种优雅的方式来做到这一点？谢谢！

标签： javascriptreactjs

解决方案

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

改变

{this.renderSecondaryNavigation}

到

{this.renderSecondaryNavigation()}

推荐阅读