antd简单的列表封装

使用antd封装一个我们需要的列表

需要的效果

代码

import React from 'react';
import { List, Typography, Divider, Avatar, Button, Badge } from 'antd';
import style from './index.less';
const data = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];
function Index() {
  return (
    <div className={style.main}>
      <List
        itemLayout="horizontal"
        header={
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Badge size="default" count={5} offset={[15, 15]}>
              <h1>最新的迭代</h1>
            </Badge>
            <Button>新建迭代</Button>
          </div>
        }
        footer={
          <div style={{ textAlign: 'center' }}>
            <h3>加载更多</h3>{' '}
          </div>
        }
        dataSource={data}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title={<a href="https://ant.design">{item.title}</a>}
              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
            />
            <div>
              <Button>新建</Button>
            </div>
          </List.Item>
        )}
      />
    </div>
  );
}

export default Index;

.main{
  width: 800px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}