A description of ternary operations in react.js

This article is about the ternary operation in react.js. If you are not familiar with or don’t understand the ternary operation in react.js, we can take a look at this article together! Without so much nonsense, let’s get straight to the topic!

1. Ternary operation

//在js中定义一个style属性，可参见reactjs(一)
var style = {
   background-color:"green";
}

var Message = React.createClass({
    render:function(){
       return{               //三元运算要被包裹在花括号中。因为花括号不能写在return的第一层，所以必须要在外围嘛加一个p标签
           <p>
             {false?<h1 style={style}>齐天大圣</h1>}           </p>
       }
    }

})

Application of if conditional statement

var Message = React.createClass({
    render:function(){
          if(true){
               return(
                <h1>孙悟空</h1>
            )    
            };
})

Comparison operation Fu

var Message = React.createClass({
    render:function(){
         return(
         <p>
            {
                true  || <h1 style = {style}>孙悟空</h1>
}
         </p>
)
            };
})

The above is all the content of this article. I hope everyone who doesn’t know much about the ternary operation in react.js will take a good look!

Related recommendations:

React.js props

The above is the detailed content of A description of ternary operations in react.js. For more information, please follow other related articles on the PHP Chinese website!