# 条件渲染与列表渲染（map、&&、三元运算）
URL: https://caijiao.org/react/chapter3/conditional-rendering
Source: docs/react/chapter3/conditional-rendering.md
Description: 条件渲染和列表渲染是 React 中常用的渲染机制，掌握这些技巧有助于灵活地控制组件的展示和数据的迭代渲染。
React 提供了多种方法来控制组件的渲染，条件渲染和列表渲染是两种非常常见的渲染方式。理解这些方法可以帮助你根据不同条件或数据动态渲染 UI。
## 1. 条件渲染
在 React 中，条件渲染是指根据不同的条件来决定是否渲染某些元素或组件。常用的方式有三种：三元运算符、逻辑与运算符 (`&&`) 和 `if` 语句。
### 1.1 使用三元运算符
三元运算符是一种简单的条件渲染方法，语法为：
```jsx
condition ? trueCase : falseCase
````
例如，根据用户是否登录显示不同的按钮：
```jsx
const isLoggedIn = true;
const button = (
);
```
如果 `isLoggedIn` 为 `true`，按钮显示 `Logout`，否则显示 `Login`。
### 1.2 使用逻辑与（`&&`）
逻辑与运算符 (`&&`) 可以用来执行条件渲染。如果左侧的条件为 `true`，则渲染右侧的内容，否则什么都不渲染：
```jsx
const messages = ['Message 1', 'Message 2'];
const element = (
{messages.length > 0 &&
You have new messages!
}
);
```
在这个例子中，只有当 `messages.length > 0` 为 `true` 时，才会渲染 `` 标签。
### 1.3 使用 `if` 语句
`if` 语句不能直接在 JSX 中使用，但你可以在渲染函数外部使用它来进行条件判断：
```jsx
function Greeting(props) {
if (props.isLoggedIn) {
return Welcome back!
;
}
return Please sign up.
;
}
```
在这个例子中，如果 `props.isLoggedIn` 为 `true`，则返回一个欢迎信息，否则返回提示用户注册的信息。
## 2. 列表渲染（`map`）
React 允许你通过 `map()` 方法遍历数组并渲染列表项。常见的做法是在 `render()` 方法或函数组件中使用 `map` 来生成列表。
### 2.1 使用 `map()` 渲染列表
假设我们有一个字符串数组，并且想要渲染每个字符串为一个列表项：
```jsx
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map((item, index) =>
{item}
);
const element = ;
```
在上述代码中，我们使用 `map()` 方法遍历 `items` 数组并为每个元素生成一个 `li` 元素。记得为每个元素提供一个唯一的 `key` 属性，以帮助 React 高效地管理 DOM。
### 2.2 使用 `map()` 渲染更复杂的组件
你还可以使用 `map()` 渲染更复杂的组件，例如：
```jsx
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
const userList = users.map((user) =>
);
const element = {userList}
;
```
在此例中，`map()` 遍历 `users` 数组并为每个用户生成一个 `UserCard` 组件。
## 3. 结合条件渲染和列表渲染
你可以将条件渲染和列表渲染结合使用。例如，只有在列表不为空时才渲染列表：
```jsx
const messages = ['Message 1', 'Message 2'];
const element = (
{messages.length > 0 ? (
{messages.map((message, index) => - {message}
)}
) : (
No messages
)}