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. reifiable type与raw type

    下面的逻辑需要明白如下两个概念: 4.7. Reifiable Types 4.8. Raw Types 举几个是Reifiable Types的例子,如下: class A{} class B< ...

  2. 警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader

    项目中使用mybatis的分页插件pagehelper出现下面的警告 出现上面的警告,并不影响程序的运行.但是毕竟看着比较闹心. 使用debug进行代码根据发现,执行的过程中使用到了pagehelpe ...

  3. eclipse自定义代码注释

    效果如下: 自定义注释的方法:

  4. Freemarker不显示对象的属性

    Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...

  5. mysql查看版本

    四种方式: 1. 命令行 ------------------->$ mysql -V mysql Ver , for Linux (x86_64) using EditLine wrapper ...

  6. <机器学习实战>读书笔记--决策树

    1.决策树的构造 createBranch伪代码: 检测数据集中的每个子项是否属于同一分类: IF SO RETURN 类标签 ELSE 寻找划分数据集的最好特征 划分数据集 创建分支节点 FOR 每 ...

  7. 以安全模式启动firefox

    碰到firefox打开后一直没有响应,解决方法: 以安全模式打开

  8. Entwurfsmuster

    1 Entwurfsmuster 1.1 Das Begriff Entwurfsmuster (englisch design patterns) sind bewährte Lösungsscha ...

  9. 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化

    使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...

  10. Debian - 安装随记

    为什么要突然换个操作系统? 之前使用的是Lubuntu,可见硬件非常糟糕. 更糟糕的是Lubuntu被玩坏了,很多程序不能正常运行. 于是打算换Debian + XFCE. 随手记录一下遇到的一些坑, ...