面试题：React 列表中条件渲染的常见实现方式

Question

在 React 中，假设你有一个包含多个用户信息的数组，每个用户对象有一个 'isActive' 字段，用来表示用户是否活跃。请描述并给出代码示例，如何在列表中仅渲染活跃用户的信息。

Answer 1

1. 描述：
   • 首先，从包含所有用户信息的数组中过滤出 isActive 为 true 的用户对象，生成一个新的活跃用户数组。
   • 然后，使用 map 方法遍历这个活跃用户数组，为每个活跃用户生成对应的 JSX 元素，以在 React 列表中渲染活跃用户信息。
2. 代码示例：

import React from'react';

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

const ActiveUserList = () => {
  const activeUsers = users.filter(user => user.isActive);
  return (
    <ul>
      {activeUsers.map(user => (
        <li key={user.id}>
          {user.name} is active.
        </li>
      ))}
    </ul>
  );
};

export default ActiveUserList;