欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

在React框架中实现一些AngularJS中ng指令的例子

时间:2021-06-05 08:57:18|栏目:AngularJS|点击:

首先设定一段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> 
  ); 
 } 

上一篇:AngularJS通过ng-route实现基本的路由功能实例详解

栏    目:AngularJS

下一篇:angularjs下ng-repeat点击元素改变样式的实现方法

本文标题:在React框架中实现一些AngularJS中ng指令的例子

本文地址:http://www.codeinn.net/misctech/135490.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有