如何有条件地渲染两个 JSX 变量？答案

【问题标题】：How can I render two JSX variables conditionally?如何有条件地渲染两个 JSX 变量？
【发布时间】：2020-11-22 22:52:29
【问题描述】：

我有两个 JSX 变量，我需要有条件地渲染它们。这些是我的变量：

 const example1= (<div className="row">
             <p>TEST1</p>
             </div>);
 const example2= (<div className="row">
             <p>TEST1</p> 
             </div>);

我需要先渲染 example1，然后再渲染 example1 && example2

如何在 JSX 中做到这一点？？

这个有效。

{this.state.input === "1" && example1}

这个不行

{this.state.input === "2" && example1 && example2}
{this.state.input === "2" ? (example1 && example2) : null}

有什么想法吗？？

【问题讨论】：

标签： javascript reactjs conditional-statements rendering

【解决方案1】：

如果你想同时显示，试试这个

{this.state.input === "2" ? <>{example1}{example2}</> : ""}

【讨论】：

【解决方案2】：

{this.state.input === "1" && example1}
{this.state.input === "2" && (
  <React.Fragment>
    {example1}
    {example2}
  </React.Fragment>
)}

如果您愿意，可以使用<> </> 作为<React.Fragment> </React.Fragment> 的简写

【讨论】：

有一种方法使用 Fragment 和 import from import React, {Fragment} from 'react';并使用你还记得怎么做吗