javascript - react -有条件地渲染多个元素

This question already has answers here:

if-else statement inside jsx: ReactJS

(12个答案)



Conditional Rendering in React js

(3个答案)


去年关闭。




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

我已经尝试过以下类似的东西

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

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

最佳答案

您必须将两个元素都包装在容器中。无论容器内部如何，都将其视为“整体”。在下面的示例中，我使用了一个空的Fragment container

此外，请注意，如果将&&之前的第一部分解析为&&，则仅执行直接在true之后编写的一段代码。 (Read more about && )。

这就是为什么必须将所有应有条件地呈现的内容包装在容器中的原因，因为如果没有这样做，则只有第一个元素将被有条件地呈现，之后的所有内容将始终被呈现

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