React嵌套条件渲染返回

Question

我有以下代码

return (

<Container>

{param1==false && param2==false &&(
<CustomComponent> 
</CustomComponent>
)}

{param1 == false && param2==true &&( 
<CustomComponent2> 
</CustomComponent2>
)}

<Container>  
</Container>
</Container>
);

现在的问题是<Container>组件仍然在自定义组件检查之后呈现，这是有意义的。

我想要它，所以只有一个组件被渲染(无论是自定义，custom2或只是容器)从这里的文档- https://react.dev/learn/conditional-rendering#conditionally-returning-jsx我知道你可以使用三元运算符有条件地渲染组件，但我有3个情况检查不2。

现在我可以嵌套三元操作符，但这是不可读的，所以我想知道一个替代方案!

Answer 1

you can check a multiple conditions in ternary operator
like this

return (
<>
<Container>
{param1==false && param2==false ?
<CustomComponent> 
</CustomComponent> :
param1 == false && param2==true ? 
<CustomComponent2>     
</CustomComponent2> :
<Container>  
</Container>
}  
</Container>
</>
);