在React框架中实现一些AngularJS中ng指令的例子
首先设定一段Angularjs代码的ng-class：
<iclass="header-help-icondown"ng-class="{up:showMenu}"></i>
比较容易理解的Angularjsng-class设置样式代码，那我们使用React怎么去实现它呢？
首先在state设置一个变量比如：isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面
<iclassName={"header-help-icondown"+(this.state.isShowLoginMenu?'up':'')}></i>
or
<spanid="vip-header-logo"className={'vip-logoicon-vip-v'+this.state.vipLevel}></span>
使用Angularjs我们可以这样做：
<divclass="logined"ng-show="isLogin">登录了</div>
<divclass="logined"ng-if="isLogin">你好，{userName}</div>
<divclass="no-login"ng-hide="isLogin">未登录</div>
那我们使用React要怎么去实现这样的场景呢？
React.createClass({
getInitialState:function(){
return{
isLogin:true,
userName:'Joe'
};
},
render:function(){
varisLogin=this.state.isShowLoginMenu,
loginHtml;
if(isLogin){
loginHtml=
<divclassName="logined">
登录了，欢迎{this.state.userName}
</div>;
}else{
loginHtml=
<divclassName="no-login">
未登录
</div>;
}
return(
<divclassName="user">
{loginHtml}
</div>
);
}