这是一个可怕的问题，在 React 中，我们经常会编写条件语句来显示不同的视图，比如这个简单的例子。
const App = () => { return ( <> { loading ? <Loading /> : <List> } </> )}
复制代码
点击并拖拽以移动
但是，当项目的代码量足够大并且有很多 JSX 条件时，事情很快就会失控。 代码变得非常混乱且可读性差。 像下面这段代码，我真的没有勇气和信心去了解它的细节。
import React, { useState } from "react"
export default function ConditionDemo() { const [ loading ] = useState(false) const [ isLogin ] = useState(true) const [ hasAuth ] = useState(false) return ( <> { loading ? <div className="loading"> loading </div> : <div className="content"> { isLogin ? ( hasAuth ? <div className="has-permission"> has-permission </div> : <div className="no-permission">You have no permission to operate</div> ) : <div className="go-login">Please login first</div> } </div> } </> )}
复制代码
点击并拖拽以移动
那么，在 React 中，我们可以通过哪些方式编写更具可读性和可维护性的代码呢？
1.使用三元运算符
三元运算符更适合需要少量条件判断的场景。
如果条件分支很多，就会发生上面例子的灾难。
例如，要在移动设备上显示一个 Mobile 组件，而在其他屏幕上显示另一个组件，可以使用三元表达式来实现：
export default function AppTernaryExpressions() { const isMobilePhone = true return ( <> { isMobilePhone ? <MobileComp /> : <PcComp /> } </> )}
复制代码
点击并拖拽以移动
2.使用“&&”简化三元运算符
有时我们可以使用“&&”来简化三元表达式，比如下面的代码。
show ? <ShowComp /> : null
复制代码
点击并拖拽以移动
&&
点击并拖拽以移动
为什么要使用两个感叹号将显示转换为布尔值？这个我会在明天的文章中跟大家再分享一篇这个内容的文章。
3.使用“if”语句
如果有数据，则显示 List 组件。 如果没有数据，则不显示任何内容。 使用 if 语句也是一个不错的选择。
export default function AppIf() { const { list } = useList()
if (!list) { return null }
return ( <List list={list} /> )}
复制代码
点击并拖拽以移动
当然，发送请求并不总是成功，也可能失败。 我们可以添加一些 if 分支来控制不同的逻辑。
export default function AppIf() { const { isLoading, isError, list } = useList()
if (isLoading) { return <div>Loading...</div> }
if (isError) { return <div>Error...</div> }
return <List list={list} />}
复制代码
点击并拖拽以移动
4.使用“switch”
过多的 if 语句会导致组件混乱，因此，我们可以将多个条件提取到包含 switch 语句的单独组件中。
让我们看一个简单的菜单切换组件：
const MenuItem({ menu }) => { switch (menu) { case 1: return <Users /> case 2: return <Chats /> case 3: return <Rooms /> default: return null }}
export default function Menu() { const [menu, setMenu] = React.useState(1) const toggleMenu = () => { setMenu((m) => { if (m === 3) return 1 return m + 1 }) } return ( <> <MenuItem menu={ menu } /> <button onClick={ toggleMenu }>toggle menu</button> </> )}
复制代码
点击并拖拽以移动
可以看到，使用‘switch’可以很方便的表达‘menu’和组件的对应关系。
5.使用枚举
如果我们需要根据用户的不同状态显示 Foo、Bar、Default 三个组件，枚举会比 if 语句更优雅。
const Foo = () => { return <div>foo</div>}const Bar = () => { return <div>bar</div>}const Default = () => { return <div>default</div>}const statusMap = { foo: <Foo />, bar: <Bar />, default: <Default />}const App = () => { const [status] = useState('default') return ( statusMap[status] )}
复制代码
点击并拖拽以移动
6.使用 JSX 控制语句
JSX 控制语句库扩展了 JSX 的功能，让你可以直接使用 JSX 实现条件渲染。
让我们举个例子。
export default function App(props) { const [ hasLogin ] = useState(false) //... return ( <Choose> <When condition={ hasLogin }> <button>Logout</button> </When> <When condition={ !hasLogin }> <button>Login</button> </When> </Choose> )}
复制代码
点击并拖拽以移动
本文就分享到这里了，赶快上手试试吧！
评论