Some examples of ng directives in AngularJS are implemented in the React framework
- 2021-01-22 04:53:38
- OfStack
ng-class: ng-class: ng-class: ng-class:
<i class="header-help-icon down" ng-class="{up:showMenu}"></i>
Angularjs -class - ng- ng-class - Angularjs - ng-class
First set a variable in state such as isShowLoginMenu, change its value in different scenarios, and then bind 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>
With Angularjs we can do this:
<div class="logined" ng-show="isLogin"> Log on to the </div>
<div class="logined" ng-if="isLogin"> hello {userName}</div>
<div class="no-login" ng-hide="isLogin"> Not logged in </div>
So how do we use React to achieve 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">
Log in. Welcome {this.state.userName}
</div>;
} else {
loginHtml =
<div className="no-login">
Not logged in
</div>;
}
return (
<div className="user">
{loginHtml}
</div>
);
}