React 条件渲染

17 Mar 2025 | 4 分钟阅读

在 React 中，我们可以创建多个组件来封装我们需要的行为。之后，我们可以根据某些条件或应用程序的状态来渲染它们。换句话说，根据一个或多个条件，一个组件决定它将返回哪些元素。在 React 中，条件渲染的工作方式与 JavaScript 中的条件类似。我们使用 JavaScript 运算符来创建表示当前状态的元素，然后 React 组件更新 UI 以匹配它们。

从给定的场景中，我们可以理解条件渲染是如何工作的。考虑一个处理登录/注销按钮的例子。登录和注销按钮将是单独的组件。如果用户已登录，则渲染注销组件以显示注销按钮。如果用户未登录，则渲染登录组件以显示登录按钮。在 React 中，这种情况被称为条件渲染。

在 React 中进行条件渲染的方法不止一种。它们如下所示。

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

if

在 render 方法中，这是在 React 中进行条件渲染的最简单方法。它仅限于组件的总块。如果条件为真，它将返回要渲染的元素。这可以在下面的例子中理解。

示例

function UserLoggin(props) {
  return <h1>Welcome back!</h1>;
}
function GuestLoggin(props) {
  return <h1>Please sign up.</h1>;
}
function SignUp(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserLogin />;
  }
  return <GuestLogin />;
}

ReactDOM.render(
  <SignUp isLoggedIn={false} />,
  document.getElementById('root')
);

逻辑 && 运算符

此运算符用于检查条件。如果条件为真，它将返回&& 之后的元素，如果为假，React 将忽略并跳过它。

语法

{
    condition &&
    // whatever written after && will be a part of output.
}

我们可以从下面的例子中理解这个概念的行为。

如果运行下面的代码，您将看不到警告消息，因为条件不匹配。

如果运行下面的代码，您将看到警告消息，因为条件匹配。

示例

import React from 'react'; 
import ReactDOM from 'react-dom'; 
// Example Component 
function Example() 
{ 
    return(<div> 
            { 
                (10 > 5) && alert('This alert will be shown!')
            } 
           </div> 
        ); 
} 

您可以在上面的输出中看到，由于条件(10 > 5)的计算结果为真，因此警报消息已成功呈现在屏幕上。

三元运算符

三元运算符用于在给定特定条件的情况下交替使用两个块。此运算符使您的 if-else 语句更加简洁。它需要三个操作数，用作 if 语句的快捷方式。

语法

如果条件为真，将渲染语句 1。否则，将渲染假。

示例

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      Welcome {isLoggedIn ? 'Back' : 'Please login first'}.
    </div>
  );
}

switch case 运算符

有时可以有多个条件渲染。在 switch case 中，条件渲染基于不同的状态应用。

示例

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

使用枚举的条件渲染

枚举是进行多个条件渲染的好方法。与 switch case 运算符相比，它更可读。它非常适合在不同的状态之间进行映射。它也适用于映射多个条件。这可以在下面的例子中理解。

示例

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

条件渲染示例

在下面的示例中，我们创建了一个称为App的有状态组件，用于维护登录控件。在这里，我们创建了三个组件，分别代表 Logout、Login 和 Message 组件。有状态组件 App 将根据其当前状态渲染<loginbutton></loginbutton>或<logoutbutton></logoutbutton>。

import React, { Component } from 'react';  
// Message Component 
function Message(props) 
{ 
    if (props.isLoggedIn) 
        return <h1>Welcome Back!!!</h1>; 
    else
        return <h1>Please Login First!!!</h1>; 
} 
// Login Component 
function Login(props) 
{ 
   return( 
           <button onClick = {props.clickInfo}> Login </button> 
       ); 
}  
// Logout Component 
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> Conditional Rendering Example </h1>
                <Message isLoggedIn = {this.state.isLoggedIn}/>             
                { 
                    (this.state.isLoggedIn)?( 
                    <Logout clickInfo = {this.handleLogout} /> 
                    ) : ( 
                    <Login clickInfo = {this.handleLogin} /> 
                    ) 
                } 
            </div>       
            ); 
    } 
} 
export default App;  

输出

当您执行上述代码时，您将获得以下屏幕。

单击注销按钮后，您将获得以下屏幕。

防止组件渲染

有时可能会发生这种情况，即使另一个组件渲染了它，一个组件也会隐藏自身。要执行此操作（防止组件渲染），我们必须返回null而不是其渲染输出。这可以在下面的例子中理解

示例

在此示例中，<show></show>的渲染基于名为displayMessage的 prop 的值。如果 prop 值为 false，则该组件不渲染。

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

输出

下一个主题React 列表

← 上一步下一步 →

React 条件渲染

if

示例

逻辑 && 运算符

语法

示例

三元运算符

语法

示例

switch case 运算符

示例

使用枚举的条件渲染

示例

条件渲染示例

防止组件渲染

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 条件渲染

if

示例

逻辑 && 运算符

语法

示例

三元运算符

语法

示例

switch case 运算符

示例

使用枚举的条件渲染

示例

条件渲染示例

防止组件渲染

示例

相关帖子

React 事件

React 表单

React 组件

React 状态 vs Props

组件生命周期

React 片段

React Flux 概念

React 路由器

React 版本

React Flux vs MVC

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器