详解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系列(2) 揭秘命名函数表达式
Jan 15 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript常用函数(2)
Nov 05 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
javaScript基础详解
Jan 19 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue发送ajax请求详解
Oct 09 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
JavaScript实现轮播图特效
Apr 10 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中取得URL的根域名的代码
2011/03/23 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python线程join方法原理解析
2020/02/11 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
自我评价200字分享
2013/12/17 职场文书
促销活动总结报告
2014/04/26 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
实习科室评语
2015/01/04 职场文书
放牛班的春天观后感
2015/06/01 职场文书
病房管理制度范本
2015/08/06 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL