在 IF ELSE 条件下显示两个反应组件

Question

在 React 应用程序中.js我有条件，如果假，则显示两个组件，如果错误显示第三个组件，但如果条件为假，我无法传递两个组件

{ !this.state.imageView ?
(  <OneComponent/> && <TwoComponent/>)
: // else
<ThridComponent />
}

Answer 1

您需要用单个元素包装两个组件。

如果您不需要其他元素，例如<div>，那么您可以使用片段：

{!this.state.imageView
? (
<>
<OneComponent/>
<TwoComponent/>
</>
)
: (
<ThridComponent />
)
}

请注意，上述<>...</>语法是以下语法的简写：

{!this.state.imageView
? (
<React.Fragment>
<OneComponent/>
<TwoComponent/>
</React.Fragment>
)
: (
<ThridComponent />
)
}

您可以在此处阅读有关片段的更多信息：
https://reactjs.org/docs/fragments.html

Answer 2

JSX 需要返回单个元素，要返回多个元素，您需要将其包装在Fragment中，最简单的方法是将元素包装在<> ... </>标记中。

将(<OneComponent/> && <TwoComponent/>)更改为<><OneComponent/> <TwoComponent/> </>并删除&&

{ !this.state.imageView ?
<>  <OneComponent/>  <TwoComponent/></>
:
<ThridComponent />
}