详解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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
JavaScript 对象创建的3种方法
Nov 17 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实现智能文件类型检测的实现代码
2011/08/02 PHP
如何判断php数组的维度
2013/06/10 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHPThumb图片处理实例
2014/05/03 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python的语言类型(详解)
2017/06/24 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
公益活动策划方案
2014/01/09 职场文书
交通事故调解协议书
2014/04/16 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
二年级数学教学反思
2016/02/16 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
windows server2008 开启端口的实现方法
2022/06/25 Servers