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;
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app