如何从 ant design List 中删除列表项？

【问题标题】：How to delete a list item from ant design List?如何从 ant design List 中删除列表项？
【发布时间】：2022-05-10 12:17:37
【问题描述】：

我想在ant design List中显示一个数据列表。

我还想在每个列表项的末尾添加一个删除或删除按钮。我找不到任何 API 来添加它。我正在使用来自 npm 的 4.3.5 版本的 antd。

这个问题有解决办法吗？

【问题讨论】：

标签： reactjs antd

【解决方案1】：

如果您检查List.Item 的API，有一个名为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

【讨论】：