谈不上黑魔法,你看看antd的实现就清楚了,其实就是api的理解 和 使用问题。
给你个例子
import React from 'react'
import ReactDOM from 'react-dom'
import OriginViewer from 'react-viewer'
class Viewer {
static show({ images }: { images: Array<{ src: string; alt?: string }> }) {
const div = document.createElement('div')
document.body.appendChild(div)
const destroy = () => {
ReactDOM.unmountComponentAtNode(div)
}
ReactDOM.render(<OriginViewer visible onClose={destroy} images={images} />, div)
return destroy
}
}
export default Viewer
调用:
import React from 'react'
import { Viewer } from '@/components'
function Example() {
return (
<div>
<button
onClick={() => {
Viewer.show({ images: [{ src: '/admin_avatar.png' }] })
}}
>
show
</button>
</div>
)
}
export default Example
这个仅仅作为思路提供给你(我都没试过),里面肯定还有其他需要调整的地方。千万不要盲目拿来直上
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…