Home  >  Article  >  Web Front-end  >  Examples of implementing some ng directives in AngularJS in the React framework_AngularJS

Examples of implementing some ng directives in AngularJS in the React framework_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:11:511824browse

First set the ng-class of a piece of Angularjs code:

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


The Angularjs ng-class setting style code is relatively easy to understand, so how do we use React to implement it?

First set a variable in state such as: isShowLoginMenu, change its value in different scenarios, and then bind it to the class style

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

or

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

Using Angularjs we can do this:

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



So how do we use React to implement such a scenario?

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn