当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 在React框架中实现一些AngularJS中ng指令的例子

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

2018年06月17日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网