jsx的{}只能是表達式，為了增強代碼可讀性裙戏，下面介紹如何處理jsx 中的條件判斷。
使用短路與&&代替三元運算符實現(xiàn)元素的條件顯示
實際業(yè)務中姆打，只有滿足條件時沧卢，有些元素才會顯示。例如頁面loading嫩实。
推薦使用短路與實現(xiàn)：
//Instead of `? :`
const Loading = (isloading) => {
return isloading && <div>Loading~</div>;
};
使用子組件或 IIFE(立即執(zhí)行函數(shù))實現(xiàn)復雜的條件判斷
業(yè)務場景較為復雜時刽辙，需在jsx 中進行多層的條件判斷。jsx 的{}中只能是表達式甲献，若使用多個三元運算符會降低代碼的可讀性宰缤。推薦拆分子組件或采用IIFE的形式。
復雜場景舉例：
// Y soo many ternary??? :-/
const sampleComponent = () => {
return (
<div>
{flag && flag2 && !flag3
? flag4
? <p>Blah</p>
: flag5
? <p>Meh</p>
: <p>Herp</p>
: <p>Derp</p>
}
</div>
)
};
- 拆分子組件：
const SubComponent = (flag, flag2, flag3, flag4, flag5) => {
if (flag && flag2 && !flag3) {
if (flag4) {
return <p>Blah</p>
} else if (flag5) {
return <p>Meh</p>
} else {
return <p>Herp</p>
}
} else {
return <p>Derp</p>
}
}
const sampleComponent = () => {
return <div>
<SubComponent {...conditions} />
</div>;
}
- IIFE:
const sampleComponent = () => {
return (
<div>
{
(() => {
if (flag && flag2 && !flag3) {
if (flag4) {
return <p>Blah</p>
} else if (flag5) {
return <p>Meh</p>
} else {
return <p>Herp</p>
}
} else {
return <p>Derp</p>
}
})()
}
</div>
)
};
