說到JavaScript的流程控制大家很容易聯想到if...else...或是三元運算子,在JSX裡面可以利用這些流程控制來選選擇性的呈現想要渲染的畫面。
官網分別介紹三種:
1.if..else
2.三元運算子(條件式 ? True的結果 :False的結果)
3.邏輯運算子(&&)
這我相信能看到這裡的,大家都對這個語法很熟,但在React寫法就變成下面這樣,如果number="A"就會return並渲染 "AAA",除此之外會return 並渲染 "BBB"。
export default function App() {
let number = "123";
if (number === "A") {
return (
<>
<h1>AAA</h1>
</>
);
} else {
return (
<>
<h1>BBB</h1>
</>
);
}
}
ES6的語法,簡單來說就是if else 的簡化版,但是略有些差異以及特性,這裡就不先多提,因為在這裡兩者幾乎是等效的。
它由一個?和:組成基本架構如下:
條件式 ? 條件式為真要輸出的結果 : 條件式為假的時候要輸出的結果
如果更改上述的範例為三元運算子的寫法如下:
export default function App() {
let number = "A";
return number === "A" ? <h1>AAA</h1> : <h1>BBB</h1>;
}
或是這樣
export default function App() {
let number = "A";
return (
<>
{number === "A" ? <h1>AAA</h1> : <h1>BBB</h1>}
</>
)
看起來更為簡單一點,可是在對於剛接觸的人比較不容易閱讀,要注意的一點
三元運算子是運算子它不是陳述式所以可以寫在jsx的{}裡,但是if...else則不行
這部分的寫法就更為簡單一點,但是適用的情況也不太一樣,比較適用決定是否要呈現元件,而不是選擇性呈現,寫法如下
export default function App() {
return <>{true && <h1>AAA</h1>} </>;
}
雖然這三種寫法都是在做元件的選擇性渲染,但其實每一種方法適用的情境略有不同,需要依照適合的狀況,選擇適合的寫法: