Home > Article > Web Front-end > Examples of implementing some ng directives in AngularJS in the React framework_AngularJS
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 ? ' 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> ); }