以下是使用 Ant Design Mobile List 组件构建用户列表的示例代码:

import React from 'react';
import { List } from 'antd-mobile';

const userList = [
  {
    id: 1,
    name: 'John Doe',
    age: 25,
    city: 'New York',
  },
  {
    id: 2,
    name: 'Jane Smith',
    age: 30,
    city: 'San Francisco',
  },
  {
    id: 3,
    name: 'Michael Johnson',
    age: 35,
    city: 'Los Angeles',
  },
];

const UserListDemo = () => {
  return (
    <List>
      {userList.map((user) => (
        <List.Item key={user.id}>
          <div>{user.name}</div>
          <div>{user.age}</div>
          <div>{user.city}</div>
        </List.Item>
      ))}
    </List>
  );
};

export default UserListDemo;

在这个示例中,我们使用 Ant Design Mobile 的 List 组件来展示用户列表。列表数据存储在 userList 数组中,每个用户对象包含 idnameagecity 属性。我们使用 map 方法遍历数组,为每个用户生成一个 List.Item 组件,并在其中展示用户的姓名、年龄和城市信息。

你可以根据自己的需求修改和定制这个示例,例如添加更多的用户属性或在列表项中使用更多 Ant Design Mobile 组件。

Ant Design Mobile 列表组件:用户列表示例

原文地址: https://www.cveoy.top/t/topic/pXIe 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录