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

 更新时间:2016年03月06日 16:14:14   作者:qiaolevip  
这篇文章主要介绍了在JavaScript的React框架中实现一些AngularJS指令的例子,React使用Virtual DOM因而与普通的js框架有些不同,需要的朋友可以参考下

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

相关文章

  • 详解react应用中的DOM DIFF算法

    详解react应用中的DOM DIFF算法

    这篇文章主要介绍了react应用中的DOM DIFF算法,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果,继而引发的一系列思考,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • React组件间通信的三种方法(简单易用)

    React组件间通信的三种方法(简单易用)

    React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-10-10
  • create-react-app项目配置全解析

    create-react-app项目配置全解析

    这篇文章主要为大家介绍了create-react-app项目配置全解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • React传递参数的几种方式

    React传递参数的几种方式

    本文详细的介绍了React传递参数的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 手把手教您实现react异步加载高阶组件

    手把手教您实现react异步加载高阶组件

    这篇文章主要介绍了手把手教您实现react异步加载高阶组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • React中前端路由的示例代码

    React中前端路由的示例代码

    本文主要介绍了React中前端路由的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 30行代码实现React双向绑定hook的示例代码

    30行代码实现React双向绑定hook的示例代码

    本文主要介绍了30行代码实现React双向绑定hook的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • React实现卡片拖拽效果流程详解

    React实现卡片拖拽效果流程详解

    这篇文章主要介绍了React Web开发实战示例,实现卡片拖拽效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • redux工作原理讲解及使用方法

    redux工作原理讲解及使用方法

    这篇文章主要介绍了redux工作原理讲解及使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11

最新评论