面试题：React条件渲染：列表与条件结合

Question

假设你有一个数组`userList`，里面的每个对象都有`isActive`属性。在React组件`UserListComponent`中，使用条件渲染，只渲染`isActive`为`true`的用户，并在每个用户项中显示用户名（假设对象有`name`属性）。请写出完整的组件代码及渲染逻辑。

Answer 1

import React from 'react';

const UserListComponent = ({ userList }) => {
  return (
    <div>
      {userList.map(user => {
        if (user.isActive) {
          return <div key={user.name}>{user.name}</div>;
        }
        return null;
      })}
    </div>
  );
};

export default UserListComponent;