如何有條件地渲染兩個 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>的簡寫