React - 有条件地渲染多个元素

Posted 2023-02-21

【中文标题】React - 有条件地渲染多个元素

【英文标题】：React - conditionally render multiple elements [duplicate]

【发布时间】：2020-03-01 04:16:28

【问题描述】：

我有一个滑块，如果滑块有多个图像，我只想显示箭头。

我在返回中尝试了类似以下的内容

(this.state.images > 1)
  <LeftArrow goToPrevSlide=this.goToPrevSlide />
  <RightArrow goToNextSlide=this.goToNextSlide />

我得到以下Parsing error: Unexpected token, expected ""

【问题讨论】：

谷歌有很多有用的信息，你在问之前有没有试过谷歌搜索？

当然，我总是先研究再问谢谢，而且这不是重复的......

[<LeftArrow key="left" goToPrevSlide=this.goToPrevSlide />, <RightArrow key="right" goToNextSlide=this.goToNextSlide />].filter(() => this.state.images > 1) 可以在这种情况下工作，虽然看起来有点难看（即使不使用箭头也会呈现）

谢谢，@PatrickRoberts 有效，你能解释一下代码中发生了什么以便我理解吗？看起来像一个过滤器数组

this.state.images > 1 && ... 您还需要用一个父组件包装您的两个子组件。您可以使用 Fragment <>...</> 或 <div> 或 w/e。

【参考方案1】：

您必须将两个元素都包装在某个容器中。这个容器被视为一个“整体”，无论里面有什么。在下面的这个例子中，我使用了一个空的Fragment container

另外，请注意，如果 && 之前的第一部分被解析为 true，则只有在 && 之后直接编写的代码会被执行。 (Read more about &&).

这就是为什么你必须将所有应该有条件渲染的东西包装在一个容器中，因为如果你不这样做，只有第一个元素会被有条件地渲染，而它之后的任何东西都会被渲染

 this.state.images > 1 && <>
  <LeftArrow goToPrevSlide=this.goToPrevSlide />
  <RightArrow goToNextSlide=this.goToNextSlide />
 </>

【讨论】：

是的，我已经在片段容器中拥有了所有内容，但我不知道我必须为条件添加另一个。注意到

@nightcode - 您没有使用 javascript && 符号来表示只有在语句的第一部分为真时才应该运行之后的内容

@vsync 回复：*** doesn't allow updating the linked to a duplicate once it has been setyes it does

这不是新的，it's been around long before the recent design changes。