React antd 封装一个简单的图片预览组件

import React, { useState } from 'react'
import * as ReactDOM from 'react-dom';
import { Modal } from 'antd'

const Index = props => {
    const [visible, setVisible] = useState(true)
    const { url, cancelCallback } = props

    const handleCancel = () => {
        setVisible(false)
        cancelCallback && cancelCallback()
    }

    return (
        <Modal width="700px" visible={visible} footer={null} onCancel={handleCancel} centered>
            <div style={{ maxHeight: '80vh', overflow: 'auto' }}>
                <img src={url} style={{ width: '100%' }} alt=""/>
            </div>
            <style>
                {`
                    .ant-modal-close-x {
                        width: 35px;
                        line-height: 35px;
                    }
                `}
            </style>
        </Modal>
    )
}

const PreviewImages = (props = {}) => {
    const { url, callback } = props

    const div = document.createElement('div')
    document.body.appendChild(div)

    const cancelCallback = () => {
        const result = ReactDOM.unmountComponentAtNode(div)
        if (result && div.parentNode) {
            div.parentNode.removeChild(div)
        }
        callback && callback()
    }

    ReactDOM.render(
        <Index
            url={url}
            cancelCallback={cancelCallback}
        />,
        div
    )
}

export default PreviewImages;