在 React 元件中使用 Switch 語句
switch
語句是 JavaScript 最有用的功能之一。
它非常適合設定條件並根據是否滿足這些條件返回特定值。在 React 中,switch
語句是處理條件渲染的最佳方法之一。
例如,你可能希望根據使用者的輸入呈現特定元件。你可以將 input
欄位的值儲存在狀態中並檢查狀態值以確定要呈現的正確元件。
大多數 React 開發人員使用 JSX 來定義元件並呼叫它們。乍一看,JSX 看起來很像 HTML,因此很容易閱讀並在必要時進行更改。
它還允許我們在 JSX 程式碼中使用 JavaScript 表示式。但是,它的支援僅限於 JavaScript 表示式,並沒有擴充套件到諸如 for
或 switch
之類的語句。
閱讀本指南以瞭解有關語句和表示式之間差異的更多資訊。
本文將討論在 JSX 中使用 switch()
(或其有效替代品)的多種方法。
如何在 React (JSX) 中使用 switch
JSX 是一種 React 語法,它允許我們在不使用 .createElement()
函式的情況下建立元件和 UI 元素。它還具有許多 HTML 所沒有的附加功能。
例如,你可以在 JSX 中編寫常規 JavaScript 程式碼。你所要做的就是將表示式放在大括號之間。
讓我們看一個例子:
class App extends Component {
render() {
return <h1>Two plus two is {2+2}</h1>;
}
}
這裡我們有一個返回單個標題元素的元件。
正如你在 playcode 中看到的,2+2
被視為有效的 JavaScript 表示式,因為它位於兩個花括號之間。這是一個引人注目的功能的簡單演示。
在開發 React 應用程式時,最好避免在 JSX 結構中放置過多的邏輯。這是避免程式碼混亂所必需的。
相反,你可以在 return
語句之外定義一個函式或變數,並在 JSX 程式碼中引用它。
開發人員不能直接在 JSX 中編寫 switch
語句。首先,它會太長,更重要的是,JSX 內部不支援語句。
switch
在 return
語句之外
可能最優化的解決方案是將 switch()
完全從你的 return
語句中刪除。然後你可以不受任何限制地使用標準 JavaScript 並引用包含 switch
語句的函式。
讓我們看一個示例:
class App extends Component {
render() {
const functionWithSwitch = (parameter) => {
switch(parameter){
case "positive":
return "+"
case "negative":
return "-"
default:
return "neutral"
}
}
return <h1>{functionWithSwitch("positive")}</h1>;
}
}
在這個例子中,我們有一個簡單的 functionWithSwitch()
函式,它包含 switch
語句並根據引數值返回三個不同的值。我們不是在 JSX 中定義所有這些,而是單獨進行,引用函式並將其傳遞給所需的值。
內聯 switch
我們之前提到過在 JSX 中直接使用 switch
是不可能的,但是有一些方法可以繞過這個規則。
對於某些人來說,內聯解決方案更容易閱讀和理解正在發生的事情。你不必來回將注意力轉移到函式定義上並呼叫來弄清楚發生了什麼。
從技術上講,這個解決方案不是一個開關,但它的執行方式完全相同。讓我們看一個例子:
class App extends Component {
render() {
return <h1>
{
{
'positive': '+',
'negative': '-'
}[param]
}
</h1>;
}
}
這裡我們使用一個普通的 JavaScript 物件來有條件地渲染一個字串。在這種情況下,它有兩個具有兩個值的屬性。最終,你將獲得作為引數
引用的任何屬性的值。
要使用這種方法設定預設情況,你需要使用邏輯 OR
(||
) 運算子。
自呼叫函式
必要時,你還可以將所有與 switch
相關的程式碼放在一個函式中,並在 JSX 中自動呼叫它。這是一個稍微冗長的解決方案,但在某些情況下可能是必要的。
讓我們看一個例子:
class App extends Component {
render() {
return <h1>{( () => {
switch(parameter){
case "positive":
return "+"
case "negative":
return "-"
default:
return "neutral"
}
})()}</h1>;
}
}
我們使用前面的函式示例並立即呼叫它來返回一個值。同樣,有更好的方法在 JSX 中使用 switch
語句,但這仍然是一個很好的解決方案。
自定義元素 Switch
React 的流行很大程度上歸功於它的可重用元件。
建立一個自定義的 Switch
元件將為你省去編寫複雜內聯邏輯的麻煩。此外,你不必來回跳來了解函式的作用。
自定義的 <Switch />
元件將採用一個 prop,並取決於它的值;它將渲染放置在 Switch
元件的開始標籤和結束標籤之間的子元件之一。
讓我們看一個例子:
let SwitchComponent = props => {
const {condition, childrenElements} = props
return childrenElements.find(element => {
return element.props.value === condition
})
}
我們可以呼叫 <Switch>
元件並在父元件中新增具有自定義值的子元件。這類似於你在 switch
語句中編寫不同 cases
的方式。
讓我們看一個示例,基於我們之前編寫的 switch
語句:
<Switch test="positive">
<p value={"positive"}>+</p>
<p value={"negative"}>-</p>
</Switch>
在這種情況下,由於 test
屬性的值,Switch
元件只會渲染具有 positive
值的段落元素。
React 中 switch()
的替代方案
React 開發人員經常將三元運算子用於簡單的條件邏輯,它接受一個條件並根據條件返回任一元件。三元運算子可以直接寫在 JSX 內部的大括號之間; 它簡單、易讀且有用。
讓我們看一下我們的示例,並使用三元運算子編寫相同的條件:
<h1>{condition === "positive" ? "+" : "-"}</h1>
這是一個相對簡單的解決方案。當然,它有其侷限性,並且不適用於更復雜的邏輯。
概括
本文描述了有條件地渲染元件的許多不同方法。所有這些解決方案都是有效的選擇,你的選擇最終應取決於你自己或你團隊的偏好。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn