Ant Design Mobile 列表组件:用户列表示例
以下是使用 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 数组中,每个用户对象包含 id、name、age 和 city 属性。我们使用 map 方法遍历数组,为每个用户生成一个 List.Item 组件,并在其中展示用户的姓名、年龄和城市信息。
你可以根据自己的需求修改和定制这个示例,例如添加更多的用户属性或在列表项中使用更多 Ant Design Mobile 组件。
原文地址: https://www.cveoy.top/t/topic/pXIe 著作权归作者所有。请勿转载和采集!