美文网首页
JSX的表达式

JSX的表达式

作者: 风筝啊 | 来源:发表于2017-08-06 10:43 被阅读0次

    javascript中也有表达式,什么加减乘除,在这里也有表达式,但是表达式必须写在{}里面,否则就按文本显示出来

    ReactDOM.render(
        <p>1+1={1+1}</p>,
        document.getElementById('demo')
    );
    

    输出结果:1+1=2;
    当然还可以试试其他的

    ReactDOM.render(
        <div>
            <p>1+1={1+1}</p>
            <p>1-1={1-1}</p>
            <p>2*2={2*2}</p>
            <p>4+2={4+2}</p>
            <p>5%3={5%3}</p>
        </div>,
        document.getElementById('demo')
    );
    

    除了这些,原生js里面表达式还有if..else..判断,但是在这里不能用if...else...,可以用三元运算代替。其实就是简写的if...else...。
    下面的语句是:如果5>2并且5<3那么就返回true否则返回false,但这表达式5<3不成立。所以返回的是false。

    ReactDOM.render(
        <div>
            {(5>2&&5<3)?'true':'false'}
        </div>,
        document.getElementById('demo')
    );
    

    输出结果:false;

    PS:三元运算后面不用加‘;’分号结尾了,否则会出现错误。

    相关文章

      网友评论

          本文标题:JSX的表达式

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