react 的条件渲染

恩予哥哥2024-07-11 22:50

使用 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;