美文网首页
与运算符&& ,三目运算符

与运算符&& ,三目运算符

作者: iambabewin | 来源:发表于2018-03-01 18:02 被阅读0次
1.与运算符&&
function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    return(
        <div>
            {unreadMessages.legth >0 &&
                <h2>
                    You have {unreadMessages.length} unread message.
                </h2>
            }
        </div>
    );
}

const messages = ['react', 're:react', "re:re:react"];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />
    document.getElementById('root')
);

运行结果如下:


true && expression 总是返回expression,而 false && expression 总是返回false。
因此,如果条件时true,&&右侧的元素就会别渲染,如果是false,React会忽略并跳过它。

2.三目运算符

condition ? true : false

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        <div>
            The use is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}
render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        <div>
        {isLoggedIn ? (
            <LogoutButton onClck={this.handleLogoutClick} />
        ) : (
            <LoginButton onClck={this.handleLoginClick} />
        )}
        </div>
    );
}

相关文章

  • 8.JavaScript-三目运算符

    1.什么是三目运算符? 三目运算符又称之为条件运算符 2.三目运算符格式 当条件为真(true)时,返回结果A当条...

  • Java入门:运算符

    Java运算符 运算符的运算对象成为操作数,根据操作数的个数把运算分为: 单目运算符 双目运算符 三目运算符 单目...

  • C++<第三篇>:运算符

    根据使用运算符的对象个数,将运算符分为单目运算符、双目运算符、三目运算符。根据使用运算符的对象之间的关系,C++ ...

  • 运算符

    算术运算符关系运算符逻辑运算符赋值运算符三目运算符字符串拼接运算符

  • Kotlin——运算符和表达式

    与Java相同的运算符 Kotlin完全支持Java的运算符 Kotlin不支持Java的三目运算符——Kotli...

  • 18_三目运算符和逗号表达式

    关键词:三目运算符、 三目运算符(a?b:c) 的返回类型、逗号表达式、一行代码实现strlen 1. 三目运算符...

  • 技术问 - 运算符有哪些

    算术运算符 赋值运算符 比较运算符 逻辑运算符 位运运算 三目运算符 算术运算符 赋值运算符 比较运算符(关系运算...

  • 尚硅谷JavaSE基础

    2.6 运算符2.6.1 常见运算符算术运算符关系运算符逻辑运算符赋值运算符三目运算符 2.6.2运算符详细介绍1...

  • 基本运算符

    基本运算符 本页内容包括: 术语 赋值运算符 算数运算符 组合赋值运算符 比较运算符 三目运算符 空和运算符 区间...

  • JAVA运算符和流程控制语句

    #运算符 1.算术运算符 2.赋值运算符 3.关系运算符 4.逻辑运算符 5.三元运算符(三目运算符) ##01....

网友评论

      本文标题:与运算符&& ,三目运算符

      本文链接:https://www.haomeiwen.com/subject/tzyixftx.html