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

Question

我有两个 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}

有任何想法吗？？

Answer 1

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

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

Answer 2

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

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