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

上一章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将忽略并跳过它。

语法

{  
    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')   
);