在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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
10个php函数实用却不常见
2015/10/13 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python编程之多态用法实例详解
2015/05/19 Python
详解Python发送邮件实例
2016/01/10 Python
Python常见工厂函数用法示例
2018/03/21 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python格式化输出%s和%d
2018/05/07 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
质检部岗位职责
2013/11/11 职场文书
电台编导求职信
2014/05/06 职场文书
公司股东出资证明书
2014/11/01 职场文书
工作感言一句话
2015/08/01 职场文书
初中信息技术教学反思
2016/02/16 职场文书