详解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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
js实现微信分享代码
Oct 11 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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自动选择 连接本地还是远程数据库
2010/12/02 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
js实现简单登录功能的实例代码
2013/11/09 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
业务部主管岗位职责
2014/01/29 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
教师师德工作总结2015
2015/07/22 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python