React-使用分支if

任务是:点击1处,2处就显示出来,再点击就收回去,这个时候就需要用到一个分支开关
在这里插入图片描述
首先拥有一个状态来控制2是否展示;
在这里插入图片描述
在这里插入图片描述
React中实现分支即点击<button>改变showPersons这个状态,然后刷新下面<div>的方法:
将`

包含在中括号里面 ,因为如果在中括号里面,代表可以在里面可以写逻辑了;
不使用if-else的形式,使用三目运算符的方法;
在这里插入图片描述

接下来修改<button>的状态内容,即更改状态值:
在这里插入图片描述
在这里插入图片描述
1处的方法是修改showPersons的状态值,使按键与要展示的内容产生关联
点击通过此函数对当前状态的值进行改变
接下来优化代码:
将三目运算符写法的代码抽离出来(因为冗余),写到render里面,因为当内容发生变化时render()都会执行
在这里插入图片描述
这样可以使renturn返回重要的东西

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值