antdmessage使用_怎么把一个react组件封装成像antd中message.info(‘123’),这种函数调用的组件？...

我在使用react-viewer，但是每次都要在render中写这个标签，因为项目中使用的地方很多，标签上绑定的参数变量也需要在state中定义，这其实挺麻烦的，我想把这个react-viewer组件封装成类似antd中message那种函数调用的组件，希望能弄成这样的：

import MyViewer from './MyViewer/index';

preview = (images) => {

MyViewer(images);

}

回答

import ReactDOM from ‘react-dom’

ReactDOM.createPortal(child, container)

谈不上黑魔法，你看看antd的实现就清楚了，其实就是api的理解 和 使用问题。

给你个例子

import React from 'react'

import ReactDOM from 'react-dom'

import OriginViewer from 'react-viewer'

class Viewer {

static show({ images }: { images: Array }) {

const div = document.createElement('div')

document.body.appendChild(div)

const destroy = () => {

ReactDOM.unmountComponentAtNode(div)

}

ReactDOM.render(, div)

return destroy

}

}

export default Viewer

调用：

import React from 'react'

import { Viewer } from '@/components'

function Example() {

return (

onClick={() => {

Viewer.show({ images: [{ src: '/admin_avatar.png' }] })

}}

>

show

)

}

export default Example

这个仅仅作为思路提供给你(我都没试过)，里面肯定还有其他需要调整的地方。千万不要盲目拿来直上