Reactjs中基于多个条件渲染组件

Question

I need to improve the rendering logic so as avoid confusing multiple ternary operators. What could be the best way to do this. I was looking for a way to use the HOC pattern for conditional render here. Kindly provide suggestions.

{

firstCondition ? 
<FirstComponent props1={props1} props2={props2} /> : 
secondCondition || thirdCondition ? 
<SecondComponent props1={props1} props2={props2} /> : 
fourthCondition ? 
<ThirdComponent props1={props1} props2={props2} /> :
<FourthComponent props1={props1} props2={props2} />

}

Answer 1

let renderContent;

if (firstCondidtion) {
    renderContent =  <FirstComponent />
}
else if (secondCondidtion) {
    renderContent =  <SecondComponent />
}
else{
    renderContent = 
         <>
            <ThirdComponent />
            <FourthComponent />
         </>
    )
}

return renderContent

or

return (
     {firstCondition && <FirstComponent />}
     {secondCondition && <secondComponent />}
     {thirdCondition && <><ThirdComponent /><FourthComponent /></>}
)