React学习:条件渲染
时间:2019-09-24
本文章向大家介绍React学习:条件渲染,主要包括React学习:条件渲染使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在react中的条件渲染和Vue不一样,react使用的是:使用不同的组件进行封装,然后根据使用的场景再来判断使用哪一个组件
React中的条件渲染和js中的一样,使用js或者其他条件运算符进行不同组件的渲染
1.元素变量
可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分,而其他的渲染部分并不会因此而改变。
//元素变量 function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ) } function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> ) } class LoginControl extends React.Component{ constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn:false} } handleLoginClick(){ this.setState({ isLoggedIn:true }) } handleLogoutClick(){ this.setState({ isLoggedIn:false }) } render(){ const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick}></LogoutButton> } else { button = <LoginButton onClick = {this.handleLoginClick}></LoginButton> } return ( <div> <Greeting isLoggedIn = {isLoggedIn} /> {button} </div> ) } }
ReactDOM.render(<LoginControl />, document.getElementById('root'));
2.运算符&&
通过大括号{}来包裹代码,来判断是否渲染&&后面的代码
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']; // const messages = []; ReactDOM.render( <Mailbox unreadMessages={messages} />, document.getElementById('root'));
之所以能这样做,是因为在 JavaScript 中,true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。
3.三元运算符condition?true:false
{condition?(true expression)/true:(false expression)/ false}
此处可以是用表达式或者字符串都可以。如果是较为复杂的表达式,建议使用组件抽离
4.组件的渲染阻止
function WarningBanner(props) { if (!props.warn) { // 根据传入参数warn进行判断是否进行渲染,如果不进行渲染的话,return null。 return null; } return ( <div className="warning"> Warning! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Hide' : 'Show'} </button> </div> ); } }
在组件的render函数中书写return null 并不会影响组件的生命周期函数的执行,例如上述组件的componentDidUpdate依旧会执行
原文地址:https://www.cnblogs.com/liyaping/p/11577366.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解:如何监控小程序异常及处理错误?
- redis实战第十三篇 jedis连接redis cluster
- 哈工大李治军操作系统课程实验环境搭建
- 我用 OpenGL 实现了那些年流行的相机滤镜
- 使用minikube安装kubernetes和dashboard
- FFmpeg + OpenGLES 实现视频解码播放和视频滤镜
- 行为型设计模式:模板模式
- 容器中的隔离与限制:namespace和cgroups
- 行为型设计模式:策略模式
- redis实战第十二篇 redis cluster请求重定向
- 行为型设计模式:责任链模式以及mybatis中的责任链
- java中BigDecimal使用和注意事项
- redis实战第十一篇 redis cluster添加密码
- Linux下docker制作springboot应用镜像
- 行为型设计模式:备忘录模式