react 的条件渲染

使用 if/else 语句

可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。

javascript 复制代码
import React from 'react';
function ConditionalRender(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  } else {
    return <GuestGreeting />;
  }
}
function UserGreeting() {
  return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}
export default ConditionalRender;
使用三元运算符

另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。

javascript 复制代码
import React from 'react';
function ConditionalRender(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <UserGreeting />
      ) : (
        <GuestGreeting />
      )}
    </div>
  );
}
function UserGreeting() {
  return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}
export default ConditionalRender;

使用逻辑 && 运算符

在 React 中,还可以使用逻辑 `&&` 运算符进行简单的条件渲染。例如:

javascript 复制代码
import React from 'react';
function ConditionalRender(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn && <UserGreeting />}
      {!isLoggedIn && <GuestGreeting />}
    </div>
  );
}
function UserGreeting() {
  return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}
export default ConditionalRender;
使用条件运算符

有时需要更复杂的条件逻辑,可以使用条件运算符 (`? :`):

javascript 复制代码
import React from 'react';
function ConditionalRender(props) {
  const isLoggedIn = props.isLoggedIn;
  const isAdmin = props.isAdmin;
  return (
    <div>
      {isLoggedIn ? (
        isAdmin ? (
          <h1>Welcome admin!</h1>
        ) : (
          <h1>欢迎 用户</h1>
        )
      ) : (
        <h1>请先登录</h1>
      )}
    </div>
  );
}
export default ConditionalRender;
相关推荐
中微子31 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z40 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao1 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风1 小时前
JS执行机制-event loop
javascript
止观止1 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中,如何制作一个空气墙
前端·javascript