antd upload itemRender
时间: 2023-07-20 21:35:22 浏览: 251
AntdUI Winform控件库
`itemRender` 是 antd 中 Upload 组件的一个属性,用于自定义上传列表的每个上传文件的渲染方式。通过 `itemRender`,我们可以自定义每个文件的展示信息和操作按钮。
示例代码如下:
```jsx
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
function itemRender(file) {
return (
<div className="custom-upload-item">
<span>{file.name}</span>
<Button size="small" danger>删除</Button>
</div>
)
}
function App() {
return (
<Upload
fileList={[]}
itemRender={itemRender}
>
<Button icon={<UploadOutlined />}>上传文件</Button>
</Upload>
);
}
```
在这个示例中,我们定义了一个名为 `itemRender` 的函数,接收一个参数 `file`,表示当前要渲染的文件对象。函数返回一个 React 元素,用于渲染当前文件的展示信息和操作按钮。在 `App` 组件中,我们将定义好的 `itemRender` 函数传递给 Upload 组件的 `itemRender` 属性,从而实现自定义渲染。
需要注意的是,`itemRender` 函数中的操作按钮需要自行编写事件处理函数,并通过 Upload 组件的回调函数(如 `onRemove`)来实现对上传文件的操作。
阅读全文