React使用5种条件渲染 – ReactJS实战教程 react条件渲染|React

上一章ReactJS实战教程请查看：React事件和事件处理
在React中，我们可以创建多个封装所需行为的组件。之后，我们可以根据某些条件或应用程序的状态来渲染它们。换句话说，基于一个或多个条件，组件决定返回哪些元素。在React中，条件渲染的工作方式与JavaScript中的条件相同。我们使用JavaScript操作符创建表示当前状态的元素，然后React组件更新UI以匹配它们。
从给定的场景中，我们可以理解条件渲染是如何工作的，考虑一个处理login/logout按钮的示例，登录和注销按钮将是单独的组件。如果用户登录，渲染logout组件以显示logout按钮。如果用户没有登录，渲染login组件以显示login按钮，在React中，这种情况称为条件渲染。
在React中有不止一种方法来执行条件渲染。它们列在下面。

if
三元运算符
逻辑& & 操作符
switch case运算符
使用枚举的条件渲染

if在React中的render方法中使用条件渲染是最简单的方法，它被限制为组件的整个块，如果条件为真，则返回要渲染的元素。在下面的例子中可以理解。
例子

function UserLoggin(props) { return < h1>Welcome back!< /h1>; } function GuestLoggin(props) { return < h1>请注册.< /h1>; } function SignUp(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return < UserLogin />; } return < GuestLogin />; }ReactDOM.render( < SignUp isLoggedIn={false} />, document.getElementById('root') );

逻辑& & 操作符【React使用5种条件渲染 – ReactJS实战教程】这个操作符用于检查条件，如果条件为真，它将在& & 之后立即返回元素，如果条件为假，React将忽略并跳过它。
语法

{ condition & & // 在& & 之后所写的内容都将成为输出的一部分 }

我们可以从下面的例子中理解这个概念的行为。
如果运行以下代码，将不会看到警报消息，因为条件不匹配。

('javatpoint' == 'srcmini') & & alert('此警告将永远不会显示!')

如果运行以下代码，你将看到警报消息，因为条件是匹配的。

(10 > 5) & & alert('该警告会显示!')

例子

import React from 'react'; import ReactDOM from 'react-dom'; // Example组件 function Example() { return(< div> { (10 > 5) & & alert('该警告会显示!') } < /div> ); }

在上面的输出中可以看到，当条件(10 > 5)的计算结果为true时，警告消息将在屏幕上成功渲染。
三元运算符三元运算符用于两个块在给定条件下交替的情况，这个操作符使if-else语句更简洁，它接受三个操作数并用作if语句的快捷方式。
语法

condition ?true : false

如果条件为真，则会渲染statement1，否则，将渲染false。
例子

render() { const isLoggedIn = this.state.isLoggedIn; return ( < div> Welcome {isLoggedIn ? 'Back' : '请重新登录'}. < /div> ); }

switch case运算符有时可能有多个条件渲染，在switch的情况下，根据不同的状态应用条件渲染。
例子

function NotificationMsg({ text}) { switch(text) { case 'Hi All': return < Message: text={text} />; case 'Hello srcmini': return < Message text={text} />; default: return null; } }

使用枚举的条件渲染enum是实现多个条件渲染的好方法，与switch case操作符相比，它更具可读性。它非常适合不同状态之间的映射，它也非常适合在多个条件下映射。在下面的例子中可以理解。
例子

function NotificationMsg({ text, state }) { return ( < div> {{ info: < Message text={text} />, warning: < Message text={text} />, }[state]} < /div> ); }

条件渲染例子在下面的示例中，我们创建了一个名为App的有状态组件，用于维护登录控件。这里，我们创建了三个表示注销、登录和消息组件的组件，有状态组件应用程序将渲染或可能取决于其当前状态。

import React, { Component } from 'react'; // 信息组件 function Message(props) { if (props.isLoggedIn) return < h1>Welcome Back!!!< /h1>; else return < h1>请重新登录!!!< /h1>; } // 登录组件 function Login(props) { return( < button onClick = {props.clickInfo}> Login < /button> ); } // 注销组件 function Logout(props) { return( < button onClick = {props.clickInfo}> Logout < /button> ); } class App extends Component{ constructor(props) { super(props); this.handleLogin = this.handleLogin.bind(this); this.handleLogout = this.handleLogout.bind(this); this.state = {isLoggedIn : false}; } handleLogin() { this.setState({isLoggedIn : true}); } handleLogout() { this.setState({isLoggedIn : false}); } render(){ return( < div> < h1>条件渲染的例子< /h1> < Message isLoggedIn = {this.state.isLoggedIn}/> { (this.state.isLoggedIn)?( < Logout clickInfo = {this.handleLogout} /> ) : ( < Login clickInfo = {this.handleLogin} /> ) } < /div> ); } } export default App;

防止组件表单渲染有时，一个组件可能隐藏自己，即使另一个组件渲染它。要做到这一点(防止组件渲染)，我们必须返回null而不是它的渲染输出。可以通过下面的例子来理解:
例子
在本例中，将根据称为displayMessage的props的值渲染。如果props值为false，则组件不渲染。

import React from 'react'; import ReactDOM from 'react-dom'; function Show(props) { if(!props.displayMessage) return null; else return < h3>组件被渲染< /h3>; } ReactDOM.render( < div> < h1>Message< /h1> < Show displayMessage = {true} /> < /div>, document.getElementById('app') );