React|web前端高级React - React从入门到进阶之React条件渲染 React|条件渲染|条件渲染|if|逻辑

系列文章目录
第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
第八章：React从入门到进阶之React条件渲染
第九章：React从入门到进阶之React中的列表与key

文章目录

- - 系列文章目录
  - 一、React元素的条件渲染
  - 二、元素变量
  - 三、与运算符&&
  - 四、三目运算符
  - 五、阻止组件渲染

一、React元素的条件渲染

在React中，我们可以创建不同的组件来封装不同的业务逻辑，然后再根据业务需要，我们可以只渲染满足某些条件的组件

React元素的条件渲染跟JavaScript的是一样的，也是使用运算符if语句或者条件运算符来根据条件渲染不同的组件

下面我们将以一个打招呼的小案例来展示一下React中条件渲染的基本使用

首先我们分别定义两个组件一个是登录状态的欢迎组件，一个是未登录状态的提示登录组件

最后再创建一个总的问候组件，然后根据是否已经登录（这里我们利用props属性值来模拟）来决定该渲染哪个组件

function UserGreeting(props){ return 欢迎您! }function GuestGreeting(props){ return 请先登录哦 }function Greeting(props){ let isLogin = props.isLogin; if(isLogin){ return } return }ReactDOM.render( , document.getElementById('root') );

运行上面的代码，页面上将会出现“欢迎您”，也就是说UserGreeting组将将会被渲染

二、元素变量

我们还可以通过变量来存储元素，这样可以帮助我们有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。

还是基于上面的问候语案例，比如除了在页面上显示对应的问候语外，我们还想在下面添加两个按钮：登录和注销

当用户是登录状态时，渲染注销按钮，相反当用户是注销状态时渲染登录按钮。

并且我们会将这两个按钮对应的元素保存在同一个button变量中

function LoginButton(props) { return ( ); }function LogoutButton(props) { return ( ); }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; if (isLoggedIn) { button = ; } else { button = ; }return ( {button} ); } }ReactDOM.render( , document.getElementById('root') );

上面我们已经讲了声明一个变量并使用if语句来进行有条件的渲染组件，但有时if语句用起来可能会觉得很麻烦，那么有没有更简洁的语法呢，答案是肯定的。
接下来我们介绍几种JSX中内联条件渲染的方法

三、与运算符&&

前面学习JSX语法的时候，我们知道：JSX语法中，我们可以通过花括号包裹代码的形式在JSX中嵌入表达式，这也包括JavaScript中的逻辑与（&&）运算符。它可以让我们很方便的进行元素的条件渲染

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( Hello! {unreadMessages.length > 0 &&You have {unreadMessages.length} unread messages.} ); }const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( , document.getElementById('root') );

上面的代码中之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它

需要注意的是，返回 false 的表达式会使 && 后面的元素被跳过，但会返回 false 表达式。在下面示例中，render 方法的返回值是 < div >0，而不是< div >Messages：0，因为0转换我boolean就是false，所以直接返回了false表达式

render() { const count = 0; return ( { count && Messages: {count}} ); }

四、三目运算符

另一种内联条件渲染的方法是使用 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 ( {isLoggedIn ? : } ); }

就像在 JavaScript 中一样，我们可以根据团队的习惯来选择可读性更高的代码风格。但要注意的是，如果条件变得过于复杂，那就应该考虑组件的提取和封装了。

五、阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。
下面的示例中，< WarningBanner /> 会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染:

function WarningBanner(props) { if (!props.warn) { return null; }return ( Warning! ); }class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); }handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); }render() { return ( ); } }ReactDOM.render( , document.getElementById('root') );