该主题尚不存在

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== 第八章：条件渲染 ======

===== 8.1 条件渲染基础 =====

React 中，你可以使用 JavaScript 的条件语句来决定渲染什么内容。

**if 语句**：

<code javascript>
function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
</code>

**元素变量**：

<code javascript>
function LoginControl() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}
</code>

===== 8.2 三元运算符 =====

对于简单的条件渲染，可以使用三元运算符：

<code javascript>
function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
    </div>
  );
}

// 内联条件
function Message({ unreadCount }) {
  return (
    <div>
      <h1>你好!</h1>
      {unreadCount > 0 ? <p>你有 {unreadCount} 条未读消息。</p> : null}
    </div>
  );
}
</code>

===== 8.3 逻辑与运算符 =====

当条件为 true 时渲染元素，否则不渲染任何内容：

<code javascript>
function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>你好!</h1>
      {unreadMessages.length > 0 && (
        <h2>你有 {unreadMessages.length} 条未读消息。</h2>
      )}
    </div>
  );
}
</code>

**注意 0 的问题**：

<code javascript>
// 如果 count 为 0，会显示 "0" 在页面上
<div>{count && <span>有消息</span>}</div>

// 正确做法
<div>{count > 0 && <span>有消息</span>}</div>
<div>{!!count && <span>有消息</span>}</div>
<div>{Boolean(count) && <span>有消息</span>}</div>
</code>

===== 8.4 阻止组件渲染 =====

让组件返回 null 可以阻止它渲染：

<code javascript>
function WarningBanner({ warn }) {
  if (!warn) {
    return null;
  }

  return (
    <div className="warning">
      警告!
    </div>
  );
}
</code>

**注意事项**：

  * 返回 null 不会影响组件的生命周期方法
  * componentDidUpdate 仍然会被调用

===== 8.5 复杂条件渲染 =====

**switch 语句**：

<code javascript>
function StatusMessage({ status }) {
  switch (status) {
    case 'loading':
      return <LoadingSpinner />;
    case 'success':
      return <SuccessMessage />;
    case 'error':
      return <ErrorMessage />;
    default:
      return null;
  }
}
</code>

**对象映射**：

<code javascript>
const statusComponents = {
  loading: LoadingSpinner,
  success: SuccessMessage,
  error: ErrorMessage
};

function StatusMessage({ status }) {
  const Component = statusComponents[status];
  return Component ? <Component /> : null;
}
</code>

**策略模式**：

<code javascript>
function Page({ userType }) {
  const pages = {
    admin: AdminPage,
    user: UserPage,
    guest: GuestPage
  };
  
  const Component = pages[userType] || GuestPage;
  return <Component />;
}
</code>

===== 8.6 权限控制组件 =====

<code javascript>
function Permission({ children, role, allowedRoles }) {
  if (!allowedRoles.includes(role)) {
    return <NoPermission />;
  }
  return children;
}

// 使用
function AdminPanel() {
  return (
    <Permission role={user.role} allowedRoles={['admin', 'superadmin']}>
      <AdminContent />
    </Permission>
  );
}
</code>

===== 8.7 多条件渲染 =====

**嵌套条件**：

<code javascript>
function ComplexCondition({ isLoggedIn, isAdmin, hasPermission }) {
  if (!isLoggedIn) {
    return <LoginPrompt />;
  }
  
  if (isAdmin) {
    return <AdminDashboard />;
  }
  
  if (hasPermission) {
    return <UserDashboard />;
  }
  
  return <NoAccess />;
}
</code>

**多分支三元运算符**：

<code javascript>
function Status({ code }) {
  return (
    <div>
      {code === 200 ? <Success /> :
       code === 404 ? <NotFound /> :
       code === 500 ? <ServerError /> :
       <Unknown />}
    </div>
  );
}
</code>

===== 8.8 性能优化 =====

**避免不必要的渲染**：

<code javascript>
// 不推荐：每次都计算
function List({ items, filter }) {
  return (
    <div>
      {items.filter(item => item.type === filter).map(item => (
        <Item key={item.id} {...item} />
      ))}
    </div>
  );
}

// 推荐：使用 useMemo
function List({ items, filter }) {
  const filteredItems = useMemo(() =>
    items.filter(item => item.type === filter),
    [items, filter]
  );

  return (
    <div>
      {filteredItems.map(item => (
        <Item key={item.id} {...item} />
      ))}
    </div>
  );
}
</code>

===== 8.9 总结 =====

本章介绍了条件渲染的各种方法：

  * if 语句
  * 三元运算符
  * 逻辑与运算符
  * 阻止组件渲染（return null）
  * 复杂条件处理
  * 权限控制模式

选择合适的条件渲染方式可以让代码更清晰、更易维护。
Detach Close
您访问的页面并不存在。如果允许，您可以使用创建该页面按钮来创建它。