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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
JavaScript 继承的实现
Jul 09 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
解决vue跨域axios异步通信问题
Apr 17 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
angularJS开发注意事项
2018/05/26 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Python常用模块用法分析
2014/09/08 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
如何验证python安装成功
2020/07/06 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大三自我鉴定范文
2013/10/05 职场文书
五一服装活动方案
2014/01/11 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
学生保证书范文
2014/04/28 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
学校火灾防控方案
2014/06/09 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
政协常委会议主持词
2015/07/03 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书