详解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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
node读写Excel操作实例分析
Nov 06 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
详解python中的 is 操作符
2017/12/26 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python实现简易动态时钟
2018/11/19 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
班级德育工作实施方案
2014/02/21 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书