在React框架中实现一些AngularJS中ng指令的例子
首先设定一段Angularjs代码的ng-class:
<i class="header-help-icon down" ng-class="{up:showMenu}"></i>
比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢?
首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面
<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>
使用Angularjs我们可以这样做:
<div class="logined" ng-show="isLogin">登录了</div> <div class="logined" ng-if="isLogin">你好,{userName}</div> <div class="no-login" ng-hide="isLogin">未登录</div>
那我们使用React要怎么去实现这样的场景呢?
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> ); }
相关推荐
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
wwzaqw 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04