React Native之如何写多个嵌套的三目运算表达式

目前我们使用的React Native或者ReactJS中,经常会使用到三目运算符来展现不同条件状态下的界面效果;此时我们就用到了三目运算啊。举例说明:

{this.state.isMyIntro ? <MyIntro /> : null}

这就是一个很简单的三目运算,来表达不同页面展示;当this.state.isMyIntro为true的情况下,就展示MyIntro组件;否则就不展示。

那么如果我们碰到条件有三种情况的?或者四种情况下的呢?首先这肯定是可以使用基本的if条件语句的;那么我们看看三目运算怎么去写这种嵌套下的条件:

<TouchableOpacity onPress={()=>this.onPressButton(index)} style={[styles.button, index == 2 ? {right:100, bottom:200} : (index == 1 ? {left:deviceWidth * 0.5,marginLeft: -60, bottom:200} : {left:deviceWidth * 0.5,marginLeft: -60, bottom:270})]}>
                   
</TouchableOpacity>

三目运算可以用在任意你想用的地方,比方style中,我们抽出来简化下看:

index == 2 ? {right:100} : (index == 1 ? {right:120} : {right:140})

1. 当index==2的时候,让right为100;

2. 当index!=2的时候,判断index是否为1;如果index==1的时候,让right为120;

3. 当index!=2的时候;且index也!=1的时候,让right为140;

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值