Beispiele für die Implementierung einiger NG-Direktiven in AngularJS im React-Framework_AngularJS

Legen Sie zunächst die ng-Klasse eines Teils des Angularjs-Codes fest:

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

Der Einstellungsstilcode der AngularJS-NG-Klasse ist relativ einfach zu verstehen. Wie verwenden wir also React, um ihn zu implementieren?

Setzen Sie zunächst eine Variable in den Status, z. B. isShowLoginMenu, ändern Sie ihren Wert in verschiedenen Szenarien und binden Sie sie dann an den Klassenstil

<i className={"header-help-icon down" + (this.state.isShowLoginMenu &#63; ' up' : '')}></i> 

oder

 
<span id="vip-header-logo" className={'vip-logo icon-vip-v' + this.state.vipLevel}></span> 

Mit Angularjs können wir Folgendes tun:

<div class="logined" ng-show="isLogin">登录了</div> 
<div class="logined" ng-if="isLogin">你好，{userName}</div> 
<div class="no-login" ng-hide="isLogin">未登录</div> 

Wie nutzen wir React, um ein solches Szenario umzusetzen?

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> 
  ); 
 }