首先設定一段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> ); } 新聞熱點
疑難解答
