在React框架中實現(xiàn)一些AngularJS中ng指令的例子
更新時間：2016年03月06日 16:14:14 作者：qiaolevip
這篇文章主要介紹了在JavaScript的React框架中實現(xiàn)一些AngularJS指令的例子,React使用Virtual DOM因而與普通的js框架有些不同,需要的朋友可以參考下
首先設(shè)定一段Angularjs代碼的ng-class：
<i class="header-help-icon down" ng-class="{up:showMenu}"></i>
比較容易理解的Angularjs ng-class設(shè)置樣式代碼，那我們使用React怎么去實現(xiàn)它呢？
首先在state設(shè)置一個變量比如： 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要怎么去實現(xiàn)這樣的場景呢？
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>
);
}
相關(guān)文章
在 React 中,您可以使用?addEventListener?函數(shù)來監(jiān)聽事件,本文通過實例代碼給大家介紹react中如何使用監(jiān)聽,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了React與Redux之?dāng)?shù)組處理講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價值，有興趣的同學(xué)可以了解一下2017-09-09
這篇文章主要介紹了React+Webpack快速上手指南(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
我們知道，在React中沒有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來對數(shù)據(jù)進行更改的。而通過this.setState方法更改的數(shù)據(jù)，會讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
30行代碼實現(xiàn)React雙向綁定hook的示例代碼
本文主要介紹了30行代碼實現(xiàn)React雙向綁定hook的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細介紹了react實現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03