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 ...
随机推荐
- springMVC与Struts2区别
1.拦截级别 Struts2是类级别的拦截,一个类对应一个request上下文 SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应 所以说从架构本身 ...
- Python案例之QQ空间自动登录程序实现
不多说,直接上干货! 工具选择: 电脑系统:win7,32 位,下面第二部安装SetupTools时注意系统版本要求: Python: 2.7.11, 相信只要是2.7的就可以实现: Seleniu ...
- python-Event事件处理进程同步
#!/usr/bin/python from multiprocessing import Process,Event import os,time def A(e): print "blo ...
- WPF获取程序版本号(Version)的方法
1.第一种:通过System来获取 public static Version GetEdition() { return System.Reflection.Assembly.GetExecutin ...
- WPF中使用Grid来实现图层的效果
<Style x:Key="ScanButtonStyle" TargetType="{x:Type Button}"> <!--<Se ...
- PTA (Advanced Level) 1040 Longest Symmetric String
1040 Longest Symmetric String (25 分) Given a string, you are supposed to output the length of the lo ...
- [PY3]——内置数据结构(1)——列表及其常用操作
列表及其常用操作_xmind图 about列表 列表是一个序列,用于顺序存储数据 列表分为两种:ArrayList(用数组实现).LinkedList(用链表实现) 定义与初始化 #l ...
- 百度开源e-chart初探
前言: 近年来,在数据服务的公司中,数据可视化越来越重要.随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架.而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~ ec ...
- [转]emailjs-smtp-client
本文转自:https://github.com/emailjs/emailjs-smtp-client/blob/master/README.md SMTP Client SMTP Client al ...
- [转]C# 安装时弹出设置服务登录窗口
本文转自:http://blog.csdn.net/prince_jun/article/details/38435887 安装服务时系统不要弹出设置服务登录窗口:在程序中将serviceProces ...