React学习笔记(七)条件渲染
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学习笔记(七)条件渲染的更多相关文章
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- react学习笔记_02-元素渲染
const element = <h1>Hello, world</h1>; 上面的内容代表react中的一个元素,元素是构成 React 应用的最小砖块. 与浏览器的 DOM ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
随机推荐
- 【转发】Webdriver使用自定义Firefox Profile运行测试
点击进入转发地址: 一般我们使用如下代码启动Firefox: 这样Selenium Server启动的Firefox将是一个全新的,不安装任何Add-On的Firefox. 如果有需要,我们可以使用我 ...
- pip 更换国内源
centos 下 没有找到 pip.conf 操作如下: 进入主目录:cd ~ 创建 .pip 目录: mkdir .pip 进入.pip 创建 pip.conf 文件:cd .pip/ touch ...
- 深入理解java集合框架之---------Arraylist集合 -----构造函数
ArrayList有三个构造方法 ArrayList有三个常量 1.private transient Object[] elementData (数组); 2.private int size (元 ...
- Redis的master/slave复制
摘自:Redis的master/slave复制 Redis的master/slave数据复制方式可以是一主一从或者是一主多从的方式,Redis在master是非阻塞模式,也就是说在slave执行数据同 ...
- 实例说明optimize table在优化mysql时很重要
今天在看CU的时候,发现有人问有关optimize来表优化的问题,当年因为这个问题,困扰我很长一段时间,今天有空我把这个问题,用实际数据来展示出来,让大家可以亲眼来看看,optimize table的 ...
- python解决处理中文的问题
脚本开头添加默认编码 python源码中出现了中文字符或要处理中文字符,运行时会出现错误,解决方法是,开头加入字符编码声明: #! /usr/bin/env python # -*- coding:u ...
- bug:执行到数据库连接后停止运行,而且不报错的奇怪情况----可能是多方同时访问造成的
数据库运行过程中奇怪停止. 即执行到“database connected ”停止运行,而且不产生任何报错信息 程序反复检查没有问题,折腾半天解决了: 可能是多个客户端操作同一个表格,多方同时操作造成 ...
- [转]高品质开源工具Chloe.ORM:支持存储过程与Oracle
本文转自:http://www.cnblogs.com/so9527/p/6131177.html 扯淡 这是一款高质量的.NET C#数据库访问框架(ORM).查询接口借鉴 Linq.借助 lamb ...
- 线程不安全的类不要轻易做为static变量使用,及如何使用ThreadLocal将共享变量变为独享变量
参考原文:<关于SimpleDateFormat安全的时间格式化线程安全问题>
- mysql数据同步
随着各行业信息化水平的不断提升,各种各样的信息管理系统都被广泛使用,各系统间数据完全独立,形成了大量的信息孤岛.出于管理及决策方面的需求,实现各平台的数据同步是一个很迫切的需求,TreeSoft数据库 ...