Блог

Я хочу показать список данных в списке ant design.

Я также хочу добавить кнопку удаления или удаления в конце каждого элемента списка. Я не могу найти какой-либо API для добавления этого. Я использую версию antd 4.3.5 из npm.

Есть ли какое-либо решение этой проблемы?

Если вы проверяете API на List.Item наличие вызываемого prop extra , который принимает JSX , и вы можете добавить кнопки к ним. Например,:

 <List
    size="large"
    header={<div>Header</div>}
    footer={<div>Footer</div>}
    bordered
    dataSource={data}
    renderItem={(item) => (
      <List.Item extra={<Button size="small">Delete</Button>}>
        {item}
      </List.Item>
    )}
/>
  

Вы также можете проверить рабочую демонстрацию здесь: https://codesandbox.io/s/polished-fast-hzl9m?file=/index.js:477-755