腾讯|广州蓝景分享—前端 React 开发使用的小技巧( 二 )

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

总结
以上就是小蓝今天跟大家分享的前端知识，如果在学习或者工作中能帮到你，可以点下赞，关注我们。