一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

3. React条件渲染

条件渲染：根据不同情况显示不同内容

• Vue：v-if、v-show
• React：条件判断与JavaScript一致

常见渲染方法：

• 条件判断语句：适用于逻辑多的情况
• 三元运算符：逻辑判断简单的情况
• 逻辑与：前置条件不成立则不执行后续代码
• v-show: 利用style对象中的display修改

render() {
    const {isLogin} = this.state;
    let welcome = null;
    let bntText = null;
    if(isLogin){
        welcome = <h2>欢迎回来!</h2>
        bntText = '退出';
    }else {
        welcome = <h2>请先登陆!</h2>
        bntText = '登陆';
    }
    return (
        <div>
            {welcome}
            <button onClick = {e => this.loginClick()}>{isLogin ? '退出' : '登陆'}</button>
            <hr/>
            <h2>{isLogin && '你好呀～欢迎使用'}</h2>
        </div>
    )
}

条件渲染

• 利用Array的函数组合显示：map、filter、slice
• 应用场景：
  • 歌曲、歌手、排行榜列表
  • 商品、购物车、评论列表
  • 好友消息、动态、联系人列表