脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React中实现一些Angular指令的例子

在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中使用Vditor自定义图片详解

    React中使用Vditor自定义图片详解

    这篇文章主要介绍了React中使用Vditor自定义图片详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 基于React封装一个验证码输入控件

    基于React封装一个验证码输入控件

    邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下
    2024-03-03
  • React Markdown配置示例

    React Markdown配置示例

    React-Markdown 是一个基于 React 的 Markdown 渲染组件库,其核心设计理念是通过 Unified 生态系统实现安全、可扩展的 Markdown 解析
    2025-04-04
  • 详解如何给React-Router添加路由页面切换时的过渡动画

    详解如何给React-Router添加路由页面切换时的过渡动画

    这篇文章主要介绍了详解如何给React-Router添加路由页面切换时的过渡动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • react之组件通信详解

    react之组件通信详解

    本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10
  • React State与生命周期详细介绍

    React State与生命周期详细介绍

    React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态
    2022-08-08
  • React router基础使用方法详解

    React router基础使用方法详解

    这篇文章主要介绍了React router基础使用方法，React Router是React生态系统中最受欢迎的第三方库之一，近一半的React项目中使用了React Router，下面就来看看如何在React项目中使用
    2023-04-04
  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    这篇文章主要介绍了如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,在vue及react中经常会遇到，今天通过实例代码给大家讲解，需要的朋友可以参考下
    2018-11-11
  • 探讨JWT身份校验与React-router无缝集成

    探讨JWT身份校验与React-router无缝集成

    这篇文章主要为大家介绍了JWT身份校验与React-router无缝集成的探讨解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • React Native Modal 的封装与使用实例详解

    React Native Modal 的封装与使用实例详解

    这篇文章主要介绍了React Native Modal 的封装与使用,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09

最新评论