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;
相关推荐
excel1 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼3 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping3 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙3 小时前
[译] Composition in CSS
前端·css
白水清风4 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix4 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278004 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端4 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧4 小时前
Promise 的使用
前端·javascript
NBtab4 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端