React 条件判断

在 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 语句:适合处理多个条件,进行不同内容的渲染。
相关推荐
irving同学4623811 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
冰冷的bin13 分钟前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
彭于晏爱编程14 分钟前
你真的了解 Map、Set 嘛
前端
崔璨18 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv18 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒29 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode1 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰1 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss1 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3