如何有条件地渲染两个 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 === "1" && example1}
{this.state.input === "2" && (
  <React.Fragment>
    {example1}
    {example2}
  </React.Fragment>
)}

如果您愿意，可以使用 <> </> 作为 shorthand 用于 <React.Fragment> </React.Fragment>

Answer 2

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

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

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

How can I render two JSX variables conditionally?

javascript

rendering

conditional-statements

reactjs