React学习笔记(七)

六、条件渲染

使用if条件运算符来创建表示当前状态的元素。

  • 可以使用变量来存储元素。比如:
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
  • 与(&&)运算符

可以通过用花括号包裹代码在JSX中嵌入任何表达式。

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{ unreadMessages.length > 0 &&
<h2>You have { unreadMessages.length } unread messages.</h2>
}
</div>
);
} const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

  • 三目运算符
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}

  • 阻止组件渲染

render方法返回null就可以实现隐藏组件。

组件的render方法返回null并不会影响该组件生命周期方法的回调。

function WarnTip(props) {
const isShow = props.isShow;
if (!isShow) {
return null;
} return (
<div className="wran-tip">FBI WARNING</div>
);
} class ToggleWarn extends React.Component {
constructor(props) {
super(props); this.state = {
isShow: false
};
} render() {
return (
<div>
<WarnTip isShow={this.state.isShow} />
<button type="button" onClick={this.toggle.bind(this)}>
{ this.state.isShow ? 'Hide' : 'Show' }
</button>
</div>
)
} toggle() {
this.setState(prev => ({
isShow: !prev.isShow
}));
}
} ReactDOM.render(
<ToggleWarn />,
document.getElementById('root')
);

The end... Last updated by: Jehorn, April 22, 2019, 3:32 PM

React学习笔记(七)条件渲染的更多相关文章

  1. vue学习笔记(五)条件渲染和列表渲染

    前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...

  2. react学习笔记_02-元素渲染

    const element = <h1>Hello, world</h1>; 上面的内容代表react中的一个元素,元素是构成 React 应用的最小砖块. 与浏览器的 DOM ...

  3. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  4. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  5. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  6. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  7. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  8. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

随机推荐

  1. 【转发】Webdriver使用自定义Firefox Profile运行测试

    点击进入转发地址: 一般我们使用如下代码启动Firefox: 这样Selenium Server启动的Firefox将是一个全新的,不安装任何Add-On的Firefox. 如果有需要,我们可以使用我 ...

  2. pip 更换国内源

    centos 下 没有找到 pip.conf 操作如下: 进入主目录:cd ~ 创建 .pip 目录: mkdir .pip 进入.pip 创建 pip.conf 文件:cd .pip/ touch ...

  3. 深入理解java集合框架之---------Arraylist集合 -----构造函数

    ArrayList有三个构造方法 ArrayList有三个常量 1.private transient Object[] elementData (数组); 2.private int size (元 ...

  4. Redis的master/slave复制

    摘自:Redis的master/slave复制 Redis的master/slave数据复制方式可以是一主一从或者是一主多从的方式,Redis在master是非阻塞模式,也就是说在slave执行数据同 ...

  5. 实例说明optimize table在优化mysql时很重要

    今天在看CU的时候,发现有人问有关optimize来表优化的问题,当年因为这个问题,困扰我很长一段时间,今天有空我把这个问题,用实际数据来展示出来,让大家可以亲眼来看看,optimize table的 ...

  6. python解决处理中文的问题

    脚本开头添加默认编码 python源码中出现了中文字符或要处理中文字符,运行时会出现错误,解决方法是,开头加入字符编码声明: #! /usr/bin/env python # -*- coding:u ...

  7. bug:执行到数据库连接后停止运行,而且不报错的奇怪情况----可能是多方同时访问造成的

    数据库运行过程中奇怪停止. 即执行到“database connected ”停止运行,而且不产生任何报错信息 程序反复检查没有问题,折腾半天解决了: 可能是多个客户端操作同一个表格,多方同时操作造成 ...

  8. [转]高品质开源工具Chloe.ORM:支持存储过程与Oracle

    本文转自:http://www.cnblogs.com/so9527/p/6131177.html 扯淡 这是一款高质量的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq.借助 lamb ...

  9. 线程不安全的类不要轻易做为static变量使用,及如何使用ThreadLocal将共享变量变为独享变量

    参考原文:<关于SimpleDateFormat安全的时间格式化线程安全问题>

  10. mysql数据同步

    随着各行业信息化水平的不断提升,各种各样的信息管理系统都被广泛使用,各系统间数据完全独立,形成了大量的信息孤岛.出于管理及决策方面的需求,实现各平台的数据同步是一个很迫切的需求,TreeSoft数据库 ...