在React框架中實現(xiàn)一些AngularJS中ng指令的例子

    這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下
    首先設(shè)定一段Angularjs代碼的ng-class：
    <i ng-class="{up:showMenu}"></i>
    比較容易理解的Angularjs ng-class設(shè)置樣式代碼，那我們使用React怎么去實現(xiàn)它呢？
    首先在state設(shè)置一個變量比如： isShowLoginMenu，在不同場景改變它的值，然后在綁定在class樣式上面  
    <i className={"header-help-icon down" + (this.state.isShowLoginMenu ? ' up' : '')}></i> 
    or
    <span id="vip-header-logo" className={'vip-logo icon-vip-v' + this.state.vipLevel}></span> 
    使用Angularjs我們可以這樣做：
    <div ng-show="isLogin">登錄了</div> 
    <div ng-if="isLogin">你好，{userName}</div> 
    <div ng-hide="isLogin">未登錄</div> 
    那我們使用React要怎么去實現(xiàn)這樣的場景呢？
    React.createClass({ 
     getInitialState: function() { 
      return { 
       isLogin: true, 
       userName: 'Joe'
      }; 
     }, 
     render: function() { 
       var isLogin = this.state.isShowLoginMenu, 
       loginHtml; 
       if (isLogin) { 
        loginHtml = 
         <div className="logined"> 
          登錄了，歡迎{this.state.userName} 
         </div>; 
       } else { 
        loginHtml = 
         <div className="no-login"> 
          未登錄 
         </div>; 
       } 
      return ( 
        <div className="user"> 
         {loginHtml} 
        </div> 
      ); 
     }