详解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 相关文章推荐
javascript面向对象编程代码
Dec 19 Javascript
javascript屏蔽右键代码
May 15 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 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中的数组操作函数整理
2008/08/18 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python的条件锁与事件共享详解
2019/09/12 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Django框架请求生命周期实现原理
2020/11/13 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
override和overload的区别
2016/03/09 面试题
新年抽奖获奖感言
2014/03/02 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
学生保证书范文
2014/04/28 职场文书
迎国庆演讲稿
2014/09/05 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
Mysql中mvcc各场景理解应用
2022/08/05 MySQL