在 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>

这是一个相对简单的解决方案。当然，它有其局限性，并且不适用于更复杂的逻辑。

概括

本文描述了有条件地渲染组件的许多不同方法。所有这些解决方案都是有效的选择，你的选择最终应取决于你自己或你团队的偏好。