react中让表格中图片单击放大预览

项目中详情页有一个表格，表格中图片要求可以单击放大预览，图片如下

项目中代码如下

                        <Col span={24}>
                            <Table bordered dataSource={agreementCompanyList}

                                size='small' pagination={false}
                            >
                                <Table.Column title='协议单位名称' align='center' dataIndex='slacProtocolCfidCompany' />
                                <Table.Column title='协议到期时间' align='center' dataIndex='slacProtocolExpireTimeStr' />
                                <Table.Column title='协议扫描件' align='center' dataIndex='slacProtocolPic' render={text => {
                                    if (typeof text === 'string') {
                                        const res = text.split(';');
                                        if (Array.isArray(res)) {
                                            if (status === 'see') {
                                                return res.map(imageList => {
                                                    return (
                                                        <ImageRender list={imageList} />
                                                    )
                                                })
                                            } else {
                                                return `${res.length}张图片`

                                            }
                                        }
                                    }
                                }} />
                                {
                                    status === 'see' && (
                                        <Table.Column title='二维码' align='center' render={(text, rec, index) => {
                                            return (
                                                <Space>
                                                    <Button type='link' danger onClick={() => { handleDownloadQRCode(row.slcaCfid + '/' + rec.slacProtocolCfid) }}>下载</Button>
                                                </Space>
                                            )

                                        }}
                                        />
                                    )
                                }
                                {status !== 'see' && (
                                    <Table.Column title='操作' align='center' render={(text, row, index) => {
                                        return (
                                            <Space>
                                                <Button type='link' danger onClick={() => { handleDeleteAgreementCompany(row) }}>删除</Button>
                                            </Space>
                                        )

                                    }}
                                    />
                                )}

                            </Table>
                        </Col>

项目中封装的ImageRender代码如下

import React from 'react';
import { Image } from 'antd';
import { imageURL } from '@/api/ask'

export default ({ list }) => {
    if (Array.isArray(list)) {
        return list.map(item => <Image key={item} src={imageURL + item} style={{ width: 100, height: 100, marginRight: 8, marginBottom: 8 }} alt='暂无图片' />)
    } else if (typeof list === 'string') {
        return <img src={imageURL + list} style={{ width: 100, height: 100, marginRight: 8, marginBottom: 8 }} alt='暂无图片' />
    } else {
        return null;
    }
}

我在项目中使用ImageRender成功的代码如下

                    <Form.Item label='结束转运照片'>
                        {status === 'see' ? (
                            <ImageRender list={typeof row.ptTransportEndPic === 'string' ? row.ptTransportEndPic.split(';') : null} />
                        ) : (
                                <ImageUpload list={finishImageList} setList={setFinishImageList} />
                            )}
                    </Form.Item>

页面控制台打印如下

怎么实现这个功能？

table渲染的时候 render 直接 image 组件 渲染就行了啊

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632