在 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