欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在React框架中實(shí)現(xiàn)一些AngularJS中ng指令的例子

 更新時(shí)間：2016年03月06日 16:14:14   作者：qiaolevip  
這篇文章主要介紹了在JavaScript的React框架中實(shí)現(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怎么去實(shí)現(xiàn)它呢？

首先在state設(shè)置一個(gè)變量比如： isShowLoginMenu，在不同場(chǎng)景改變它的值，然后在綁定在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要怎么去實(shí)現(xiàn)這樣的場(chǎng)景呢？

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中如何使用監(jiān)聽(tīng)

    react中如何使用監(jiān)聽(tīng)

    在 React 中,您可以使用?addEventListener?函數(shù)來(lái)監(jiān)聽(tīng)事件,本文通過(guò)實(shí)例代碼給大家介紹react中如何使用監(jiān)聽(tīng),感興趣的朋友跟隨小編一起看看吧
    2023-10-10
  • React與Redux之?dāng)?shù)組處理講解

    React與Redux之?dāng)?shù)組處理講解

    這篇文章主要介紹了React與Redux之?dāng)?shù)組處理講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 解決jest處理es模塊示例詳解

    解決jest處理es模塊示例詳解

    這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • react中涉及的增加,刪除list方式

    react中涉及的增加,刪除list方式

    這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • 記錄React使用connect后,ref.current為null問(wèn)題及解決

    記錄React使用connect后,ref.current為null問(wèn)題及解決

    記錄React使用connect后,ref.current為null問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • 詳解React native全局變量的使用(跨組件的通信)

    詳解React native全局變量的使用(跨組件的通信)

    本篇文章主要介紹了詳解React native全局變量的使用(跨組件的通信)，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下
    2017-09-09
  • React+Webpack快速上手指南(小結(jié))

    React+Webpack快速上手指南(小結(jié))

    這篇文章主要介紹了React+Webpack快速上手指南(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • React this.setState方法使用原理分析介紹

    React this.setState方法使用原理分析介紹

    我們知道，在React中沒(méi)有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來(lái)對(duì)數(shù)據(jù)進(jìn)行更改的。而通過(guò)this.setState方法更改的數(shù)據(jù)，會(huì)讓組件的render重新渲染，并且刷新數(shù)據(jù)
    2022-09-09
  • 30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼

    30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼

    本文主要介紹了30行代碼實(shí)現(xiàn)React雙向綁定hook的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • react實(shí)現(xiàn)原生下拉刷新

    react實(shí)現(xiàn)原生下拉刷新

    這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03

最新評(píng)論