> 웹 프론트엔드 > JS 튜토리얼 > React.js의 삼항 연산에 대한 설명

React.js의 삼항 연산에 대한 설명

韦小宝
풀어 주다: 2018-03-14 10:01:24
원래의
2534명이 탐색했습니다.

이 글은 React.js의 삼항 연산에 관한 글입니다. React.js의 삼항 연산에 대해 잘 모르시거나 이해하지 못하신다면 이 글을 함께 살펴보세요! 쓸데없는 말은 생략하고 바로 본론으로 들어가겠습니다!

1.삼항연산

//在js中定义一个style属性,可参见reactjs(一)
var style = {
   background-color:"green";
}
로그인 후 복사
var Message = React.createClass({
    render:function(){
       return{               //三元运算要被包裹在花括号中。因为花括号不能写在return的第一层,所以必须要在外围嘛加一个p标签
           <p>
             {false?<h1 style={style}>齐天大圣</h1>}           </p>
       }
    }

})
로그인 후 복사

if 조건문 적용

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

비교연산자

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

이상은 이 글의 3가지 요소를 모두 이해하시길 바랍니다. .js 메타 연산에 대해 잘 모르는 분들은 자세히 살펴보세요!

관련 추천:

React.js props

위 내용은 React.js의 삼항 연산에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿