React 条件判断实例详解

更新时间：2024年08月12日 10:42:52 作者：国产bug零零柒

在 React 中,可以通过 JavaScript 的条件语句来动态渲染组件或元素,下面给大家分享几种常用的在 React 中处理条件渲染的方法,感兴趣的朋友跟随小编一起看看吧

1. 使用 if 语句

在 render 方法或函数组件的返回值中使用 if 语句来决定渲染内容。

实例

import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;
    let content;
    if (isLoggedIn) {
      content = <h1>Welcome back!</h1>;
    } else {
      content = <h1>Please sign up.</h1>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

2. 使用三元运算符

在 JSX 中，可以使用三元运算符进行简洁的条件渲染。

实例

import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

3. 使用逻辑与 (&&) 运算符

在 JSX 中，可以使用逻辑与运算符来进行条件渲染。如果条件为 true，则渲染后面的元素。

实例

import React from 'react';
import ReactDOM from 'react-dom/client';
const MyComponent = (props) => {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign up.</h1>}
    </div>
  );
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent isLoggedIn={true} />);

4. 使用 switch 语句

在需要处理多个条件时，可以在 render 方法中使用 switch 语句。

实例

import React from 'react';
import ReactDOM from 'react-dom/client';
class MyComponent extends React.Component {
  render() {
    const userRole = this.props.userRole;
    let content;
    switch (userRole) {
      case 'admin':
        content = <h1>Welcome, Admin!</h1>;
        break;
      case 'user':
        content = <h1>Welcome, User!</h1>;
        break;
      case 'guest':
        content = <h1>Welcome, Guest!</h1>;
        break;
      default:
        content = <h1>Who are you?</h1>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent userRole="admin" />);

小结

if 语句：适合在 render 方法或函数组件的返回值中使用来决定渲染内容。
三元运算符：适合在 JSX 中进行简洁的条件渲染。
逻辑与 (&&) 运算符：适合在 JSX 中条件渲染，当条件为 true 时渲染元素。
switch 语句：适合处理多个条件，进行不同内容的渲染。

到此这篇关于React 条件判断的文章就介绍到这了,更多相关React 条件判断内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react-navigation 如何判断用户是否登录跳转到登录页的方法

在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React数据传递的六种方式详解
在 React 应用程序中,数据传递是非常重要的,它允许我们在组件之间共享信息和状态,从而构建出复杂的用户界面,本文将深入探讨React数据传递的六种方式,需要的朋友可以参考下
2025-08-08
浅谈React Native Flexbox布局(小结)
这篇文章主要介绍了浅谈React Native Flexbox布局(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
react写一个select组件的实现代码
这篇文章主要介绍了react写一个select组件的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
React Native中原生实现动态导入的示例详解
在React Native社区中,原生动态导入一直是期待已久的功能,在这篇文章中,我们将比较静态和动态导入,学习如何原生地处理动态导入,以及有效实施的最佳实践,希望对大家有所帮助
2024-02-02
React 路由懒加载的几种实现方案
这篇文章主要介绍了React 路由懒加载的几种实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
React 高德地图进京证路线规划问题记录(汇总)
这篇文章主要介绍了React高德地图进京证路线规划问题小记,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08
react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法
这篇文章主要介绍了react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
react组件中的constructor和super知识点整理
这篇文章主要介绍了react组件中的constructor和super知识点整理,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-08
React如何实现视频旋转缩放
这篇文章主要为大家详细介绍了React如何实现视频旋转缩放功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-11-11