菜鸟教程
教程 react tutorial

条件渲染与列表渲染（map、&&、三元运算）

React 提供了多种方法来控制组件的渲染，条件渲染和列表渲染是两种非常常见的渲染方式。理解这些方法可以帮助你根据不同条件或数据动态渲染 UI。

1. 条件渲染

在 React 中，条件渲染是指根据不同的条件来决定是否渲染某些元素或组件。常用的方式有三种：三元运算符、逻辑与运算符 (&&) 和 if 语句。

1.1 使用三元运算符

三元运算符是一种简单的条件渲染方法，语法为：

jsx 
condition ? trueCase : falseCase

`

例如，根据用户是否登录显示不同的按钮：

jsx 
const isLoggedIn = true;
const button = (
  <button>
    {isLoggedIn ? 'Logout' : 'Login'}
  </button>
);

如果 isLoggedIn 为 true，按钮显示 Logout，否则显示 Login。

1.2 使用逻辑与（&&）

逻辑与运算符 (&&) 可以用来执行条件渲染。如果左侧的条件为 true，则渲染右侧的内容，否则什么都不渲染：

jsx 
const messages = ['Message 1', 'Message 2'];
const element = (
  <div>
    {messages.length > 0 && <h2>You have new messages!</h2>}
  </div>
);

在这个例子中，只有当 messages.length > 0 为 true 时，才会渲染 <h2> 标签。

1.3 使用 if 语句

if 语句不能直接在 JSX 中使用，但你可以在渲染函数外部使用它来进行条件判断：

jsx 
function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

在这个例子中，如果 props.isLoggedIn 为 true，则返回一个欢迎信息，否则返回提示用户注册的信息。

2. 列表渲染（map）

React 允许你通过 map() 方法遍历数组并渲染列表项。常见的做法是在 render() 方法或函数组件中使用 map 来生成列表。

2.1 使用 map() 渲染列表

假设我们有一个字符串数组，并且想要渲染每个字符串为一个列表项：

jsx 
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map((item, index) =>
  <li key={index}>{item}</li>
);

const element = <ul>{listItems}</ul>;

在上述代码中，我们使用 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) =>
  <UserCard key={user.id} name={user.name} age={user.age} />
);

const element = <div>{userList}</div>;

在此例中，map() 遍历 users 数组并为每个用户生成一个 UserCard 组件。

3. 结合条件渲染和列表渲染

你可以将条件渲染和列表渲染结合使用。例如，只有在列表不为空时才渲染列表：

jsx 
const messages = ['Message 1', 'Message 2'];
const element = (
  <div>
    {messages.length > 0 ? (
      <ul>
        {messages.map((message, index) => <li key={index}>{message}</li>)}
      </ul>
    ) : (
      <p>No messages</p>
    )}
  </div>
);

这里我们先通过三元运算符检查 messages 数组的长度。如果数组非空，则渲染消息列表；如果数组为空，则显示一条提示信息。

总结

条件渲染和列表渲染是 React 中两种常见的渲染模式。通过灵活使用 map、三元运算符、逻辑与运算符以及 if 语句，可以根据不同的条件和数据动态更新 UI。

相关内容