腾讯|广州蓝景分享—前端 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>
)

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