栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

首先设定一段Angularjs代码的ng-class:

 

 
比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢?

首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面  
  

 

  or  

 
 

使用Angularjs我们可以这样做:

登录了 
你好,{userName} 
未登录 

 
 
那我们使用React要怎么去实现这样的场景呢?

React.createClass({ 
 getInitialState: function() { 
  return { 
   isLogin: true, 
   userName: 'Joe' 
  }; 
 }, 
 
 render: function() { 
   var isLogin = this.state.isShowLoginMenu, 
   loginHtml; 
 
   if (isLogin) { 
    loginHtml = 
      
      登录了,欢迎{this.state.userName} 
     ; 
   } else { 
    loginHtml = 
      
      未登录 
     ; 
   } 
 
  return ( 
     
     {loginHtml} 
     
  ); 
 } 

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/98097.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号