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

Question

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

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

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

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

Answer 1

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

此外，通知，只有一段代码写入直接后的&&是，如果第一部分在被执行之前&&被解析为true。（阅读更多关于&&）。

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

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