React条件性渲染的方式和Vue是不同的,之前用vue做项目时觉得vue是在是强大,通过v-if就可以选择性的渲染组件,另外,对于列表的渲染更是方便,一个v-for就可以进行快速的渲染,但是React无论在条件性渲染还是列表渲染,我觉得都非常的麻烦。 发点牢骚~ 也许后面可以体会到React的强大吧。

  官网上对于条件渲染有系统的介绍,下面列举两种常用的方式。

  1、对于function 创建组件的方式,我们直接通过if(){}判断即可,如果符合条件,就return一个组件,如果不符合,就return另外一个。

  2、对于extends React.Component() 的方式,我们一般是在jsx中使用{},来写js,常用的做法是 !!bool && <div></div> 这种方式,当然,我们还可以通过三目运算符的方式进行渲染。

如下所示:

import React from 'react';

require('./log.less');

class Log extends React.Component {
render () {
var bool = this.props.isUp;
return (
<div className="sign-wrap">
<h2>Wayne Chat</h2>
<div className="form-control">
<label>用户名</label><br/>
<input type='text' />
</div>
<div className="form-control">
<label>密码</label><br/>
<input type='text' />
</div>
{
!!bool &&
<div className="form-control">
<label>确认密码</label><br/>
<input type='text' />
</div>
}
<div className="form-control">
<div className="sub-btn">{this.props.signStyle}</div>
</div>
</div> );
}
} export default Log;

React条件性渲染的更多相关文章

  1. 2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用

    一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...

  2. react服务端渲染(同构)

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...

  3. (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  4. React 避免重渲染

    组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态.当 props 和 state 发生变化时 ...

  5. [转]SSIS数据转换组件_派生列、审核、字符映射转换和条件性拆分转换

    本文转自:http://www.cnblogs.com/gudujianxiao/archive/2012/04/14/2446925.html 一 派生列 派生列转换通过对输入列进行类型转换或应用表 ...

  6. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  7. Electron结合React,在渲染进程中使用 node 模块

    Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...

  8. 深入了解React组件重新渲染的条件和生命周期

    React组件rerender的真正条件 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...

  9. React——条件渲染

    在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分. 一.用变量存储元素 可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素 function Logi ...

随机推荐

  1. IOCP~~

    下载源代码 原文网址:http://www.codeproject.com/KB/IP/iocp_server_client.aspx 源码使用了高级的完成端口(IOCP)技术,该技术可以有效地服务于 ...

  2. 4、Semantic-UI之图标的使用

    4.1 图标的使用   在Semantic-UI中定义了很多的图标样式,这些图标样式可以通过官网查看名称(官网中名称首字母都是大写的,但是在实际使用中全部都是小写使用的): 实例:图标样式 定义基础图 ...

  3. MFC中按钮控件的用法笔记(转)

    VC学习笔记1:按钮的使能与禁止 用ClassWizard的Member Variables为按钮定义变量,如:m_Button1:则m_Button1.EnableWindow(true); 使按钮 ...

  4. win10登录不上sql2005

    因需求安装了一个SQL Server 2005. 登录的时候,用户Sa模式可以登录,Windows身份验证方式却无法登录. 经测试.解决方法如下: SQL Server Management Stud ...

  5. java状态模式

    核心思想就是:当对象的状态改变时,同时改变其行为,很好理解!就拿QQ来说,有几种状态,在线.隐身.忙碌等,每个状态对应不同的操作,而且你的好友也能看到你的状态,所以,状态模式就两点:1.可以通过改变状 ...

  6. C#多线程学习(三) 生产者和消费者

    前面说过,每个线程都有自己的资源,但是代码区是共享的,即每个线程都可以执行相同的函数.这可能带来的问题就是几个线程同时执行一个函数,导致数据的混乱,产生不可预料的结果,因此我们必须避免这种情况的发生. ...

  7. 一行代码搞定Dubbo接口调用

    本文来自网易云社区 作者:吕彦峰 在工作中我们经常遇到关于接口测试的问题,无论是对于QA同学还是开发同学都会有远程接口调用的需求.针对这种问题我研发了一个工具包,专门用于远程Dubbo调用,下面就让我 ...

  8. Nginx+Apache动静分离

    Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术.动静分离技术其实是采用代理的方式,在server{}段中加入带正则匹配的location来指定匹配项 针对PHP的动 ...

  9. Python的__getattribute__二三事

    本来以为自己对__getattribute__已经比较了解了,结果用到的时候,才发现有一些知识点之前一直没有真正弄明白,记录如下(针对python3,python2差异较大): object类有__g ...

  10. 基于windows fiber的协程(coroutine)实现

    一个非常简单,但是实用的协程实现,使用Windows的*Fiber函数族(linux可以稍微改一下用*context函数族). fco.h #ifndef _MSC_VER #error " ...