這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下

首先設定一段Angularjs代碼的ng-class：

<i class="header-help-icon down" ng-class="{up:showMenu}"></i>

比較容易理解的Angularjs ng-class設置樣式代碼，那我們使用React怎么去實現(xiàn)它呢？

首先在state設置一個變量比如： 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 class="logined" ng-show="isLogin">登錄了</div> 

<div class="logined" ng-if="isLogin">你好，{userName}</div> 

<div class="no-login" 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> 

  ); 

 }