React学习笔记之条件渲染(一)


Posted in Javascript onJuly 02, 2017

前言

在React中,你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分,这取决于应用的state(状态)。下面就来看看详细的介绍:

条件渲染

可以根据state的值进行组件的条件渲染。例如:

function Greeting(props) { 
 const isLoggedIn = props.isLoggedIn;
 if (isLoggedIn) {
 return <UserGreeting />;
 }
 return <GuestGreeting />;
}

ReactDOM.render( 
 // Try changing to isLoggedIn={true}:
 <Greeting isLoggedIn={false} />,
 document.getElementById('root')
);

你还可以用变量去存储组件,以便进行条件筛选,使得渲染函数的返回值更加清爽,例如:

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 = null;
 if (isLoggedIn) {
 button = <LogoutButton onClick={this.handleLogoutClick} />;
 } else {
 button = <LoginButton onClick={this.handleLoginClick} />;
 }

 return (
 <div>
 <Greeting isLoggedIn={isLoggedIn} />
 {button}
 </div>
 );
 }
}

ReactDOM.render( 
 <LoginControl />,
 document.getElementById('root')
);

还可以使用短操作符来实现条件筛选,可以用更短的代码写出渲染结果。例如&&来替代if,?:来替代if else, 例如:

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() { 
 const isLoggedIn = this.state.isLoggedIn;
 return (
 <div>
 {isLoggedIn ? (
 <LogoutButton onClick={this.handleLogoutClick} />
 ) : (
 <LoginButton onClick={this.handleLoginClick} />
 )}
 </div>
 );
}

如果组件有时候需要渲染出来,而有时候不需要渲染出来,在不需要渲染的时候返回null即可。例如:

function WarningBanner(props) { 
 if (!props.warn) {
 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(prevState => ({
 showWarning: !prevState.showWarning
 }));
 }

 render() {
 return (
 <div>
 <WarningBanner warn={this.state.showWarning} />
 <button onClick={this.handleToggleClick}>
  {this.state.showWarning ? 'Hide' : 'Show'}
 </button>
 </div>
 );
 }
}

ReactDOM.render( 
 <Page />,
 document.getElementById('root')
);

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
layUI实现三级导航菜单效果
Jul 26 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue.js学习之vue-cli定制脚手架详解
Jul 02 #Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 #Javascript
关于使用axios的一些心得技巧分享
Jul 02 #Javascript
React服务端渲染(总结)
Jul 01 #Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 #Javascript
详解node-ccap模块生成captcha验证码
Jul 01 #Javascript
vue元素实现动画过渡效果
Jul 01 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
JS高级笔记
2011/07/13 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
css sprite简单实例
2016/05/23 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
营销总监岗位职责范本
2014/02/26 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
导师工作推荐信
2015/03/27 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Redis中一个String类型引发的惨案
2021/07/25 Redis
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸