详解React 条件渲染


Posted in Javascript onJuly 08, 2020

在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

先来看两个组件:

function UserGreeting(props) {
 return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
 return <h1>请先注册。</h1>;
}

我们将创建一个 Greeting 组件,它会根据用户是否登录来显示其中之一:

function Greeting(props) {
 const isLoggedIn = props.isLoggedIn;
 if (isLoggedIn) {
 return <UserGreeting />;
 }
 return <GuestGreeting />;
}
 
ReactDOM.render(
 // 尝试修改 isLoggedIn={true}:
 <Greeting isLoggedIn={false} />,
 document.getElementById('example')
);

元素变量

你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。

在下面的例子中,我们将要创建一个名为 LoginControl 的有状态的组件。

它会根据当前的状态来渲染 <LoginButton /><LogoutButton />,它也将渲染前面例子中的 <Greeting />

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('example')
);

与运算符 &&

你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ,也包括 JavaScript 的逻辑与 &&,它可以方便地条件渲染一个元素。

function Mailbox(props) {
 const unreadMessages = props.unreadMessages;
 return (
 <div>
  <h1>Hello!</h1>
  {unreadMessages.length > 0 &&
  <h2>
   您有 {unreadMessages.length} 条未读信息。
  </h2>
  }
 </div>
 );
}
 
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
 <Mailbox unreadMessages={messages} />,
 document.getElementById('example')
);

在 JavaScript 中,true && expression 总是返回 expression,而 false && expression 总是返回 false。

因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。

三目运算符

条件渲染的另一种方法是使用 JavaScript 的条件运算符:

condition ? true : false。

在下面的例子中,我们用它来有条件的渲染一小段文本。

render() { const isLoggedIn = this.state.isLoggedIn; return (
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
); }

同样它也可以用在较大的表达式中,虽然不太直观:

render() {
 const isLoggedIn = this.state.isLoggedIn;
 return (
 <div>
  {isLoggedIn ? (
  <LogoutButton onClick={this.handleLogoutClick} />
  ) : (
  <LoginButton onClick={this.handleLoginClick} />
  )}
 </div>
 );
}

阻止组件渲染

在极少数情况下,你可能希望隐藏组件,即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

在下面的例子中,<WarningBanner /> 根据属性 warn 的值条件渲染。如果 warn 的值是 false,则组件不会渲染:

function WarningBanner(props) {
 if (!props.warn) {
 return null;
 }
 
 return (
 <div className="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 ? '隐藏' : '显示'}
  </button>
  </div>
 );
 }
}
 
ReactDOM.render(
 <Page />,
 document.getElementById('example')
);

组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

以上就是详解React 条件渲染的详细内容,更多关于React 条件渲染的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
js面向对象编程总结
Feb 16 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
js实现页面导航层级指示效果
Aug 25 Javascript
webpack5 联邦模块介绍详解
Jul 08 #Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
You might like
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
KTV员工管理制度
2015/08/06 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang
Django REST framework 限流功能的使用
2021/06/24 Python
JavaScript函数柯里化
2021/11/07 Javascript
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android