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


Posted in Javascript onMarch 06, 2016

首先设定一段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> 
  ); 
 }
Javascript 相关文章推荐
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
vue实现评价星星功能
Jun 30 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
javascript实现label标签跳出循环操作
Mar 06 #Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 #Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 #Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 #Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 #Javascript
JavaScript模拟数组合并concat
Mar 06 #Javascript
JavaScript模拟push
Mar 06 #Javascript
You might like
php empty函数 使用说明
2009/08/10 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
一个简单的php路由类
2016/05/29 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jquery处理json对象
2014/11/03 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python中super函数的用法
2017/11/17 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
汽车驾驶求职信
2013/10/25 职场文书
合理化建议书
2015/02/04 职场文书
总经理年会致辞
2015/07/29 职场文书
毕业班工作总结
2015/08/10 职场文书
2016银行求职自荐信
2016/01/28 职场文书
java基础——多线程
2021/07/03 Java/Android