详解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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 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分页类代码
2013/04/02 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python类的用法实例浅析
2015/05/27 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
numpy库reshape用法详解
2020/04/19 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
社区志愿者心得体会
2014/01/03 职场文书
大一新生学期自我评价
2014/04/09 职场文书
会计系毕业求职信
2014/08/07 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
python基础之爬虫入门
2021/05/10 Python
python3操作redis实现List列表实例
2021/08/04 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python