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 ...
随机推荐
- reifiable type与raw type
下面的逻辑需要明白如下两个概念: 4.7. Reifiable Types 4.8. Raw Types 举几个是Reifiable Types的例子,如下: class A{} class B< ...
- 警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader
项目中使用mybatis的分页插件pagehelper出现下面的警告 出现上面的警告,并不影响程序的运行.但是毕竟看着比较闹心. 使用debug进行代码根据发现,执行的过程中使用到了pagehelpe ...
- eclipse自定义代码注释
效果如下: 自定义注释的方法:
- Freemarker不显示对象的属性
Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...
- mysql查看版本
四种方式: 1. 命令行 ------------------->$ mysql -V mysql Ver , for Linux (x86_64) using EditLine wrapper ...
- <机器学习实战>读书笔记--决策树
1.决策树的构造 createBranch伪代码: 检测数据集中的每个子项是否属于同一分类: IF SO RETURN 类标签 ELSE 寻找划分数据集的最好特征 划分数据集 创建分支节点 FOR 每 ...
- 以安全模式启动firefox
碰到firefox打开后一直没有响应,解决方法: 以安全模式打开
- Entwurfsmuster
1 Entwurfsmuster 1.1 Das Begriff Entwurfsmuster (englisch design patterns) sind bewährte Lösungsscha ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- Debian - 安装随记
为什么要突然换个操作系统? 之前使用的是Lubuntu,可见硬件非常糟糕. 更糟糕的是Lubuntu被玩坏了,很多程序不能正常运行. 于是打算换Debian + XFCE. 随手记录一下遇到的一些坑, ...