在 React 元件中使用 Switch 語句

1. 如何在 React (JSX) 中使用 switch
2. React 中 switch() 的替代方案
3. 概括

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>

這是一個相對簡單的解決方案。當然，它有其侷限性，並且不適用於更復雜的邏輯。

概括

本文描述了有條件地渲染元件的許多不同方法。所有這些解決方案都是有效的選擇，你的選擇最終應取決於你自己或你團隊的偏好。