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