在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中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-12-12
郵箱、手機驗證碼輸入是許多在線服務(wù)和網(wǎng)站常見的安全驗證方式之一,本文主要來和大家討論一下如何使用React封裝一個驗證碼輸入控件,感興趣的可以了解下2024-03-03
React-Markdown 是一個基于 React 的 Markdown 渲染組件庫,其核心設(shè)計理念是通過 Unified 生態(tài)系統(tǒng)實現(xiàn)安全、可擴展的 Markdown 解析2025-04-04
詳解如何給React-Router添加路由頁面切換時的過渡動畫
這篇文章主要介紹了詳解如何給React-Router添加路由頁面切換時的過渡動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
React將組件（component）看成一個狀態(tài)機（State Machines），通過其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實現(xiàn)并與用戶交互，維持組件的不同狀態(tài)2022-08-08
這篇文章主要介紹了React router基礎(chǔ)使用方法，React Router是React生態(tài)系統(tǒng)中最受歡迎的第三方庫之一，近一半的React項目中使用了React Router，下面就來看看如何在React項目中使用2023-04-04
如何去除富文本中的html標簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實例代碼給大家講解，需要的朋友可以參考下2018-11-11
這篇文章主要為大家介紹了JWT身份校驗與React-router無縫集成的探討解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了React?Native?Modal?的封裝與使用,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09