使用了官方推薦的相冊模式的預覽，但是點擊預覽之后，每次都是從圖片列表的第一張開始預覽，而不是點擊哪張就從哪張開始預覽：
所以這里我就封裝了一下，對初始化預覽的列表進行了邏輯處理：
當點擊開始預覽的時候，要找到當前圖片在預覽圖列表中的索引，然后設置為當前預覽圖索引，然后等點擊左右切換的時候，要改變這個索引，所以要使用onChange函數，等點擊關閉按鈕的時候，還要重置這個索引為點擊時候的圖片索引：
import './index.scss'
import { Image } from 'antd'
import { useState } from 'react'export default function ImageItem(props: any) {// console.log('props', props)const preList = ['https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp','https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp','https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',]const [preIndex, setIndex] = useState(preList.indexOf(props.imgUrl))// 當點擊前后切換的時候，修改當前預覽圖const handleSwitch = (current: number, prevCurrent: number) => {console.log('切換預覽圖', current, prevCurrent)setIndex(current)}// 關閉預覽圖是重置預覽為當前圖索引const handleClose = (visible: boolean) => {console.log('關閉預覽圖', visible)if (!visible) {setIndex(preList.indexOf(props.imgUrl))}}return (<div className="file"><Image.PreviewGroupitems={preList}preview={{minScale: 0.1,current: preIndex,onChange: handleSwitch,onVisibleChange: handleClose,}}><Image className="item-img" src={props.imgUrl} /></Image.PreviewGroup></div>)
}
預覽結果:?
)
