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

Question

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

import MyViewer from './MyViewer/index';
preview = (images) => {
    MyViewer(images);
}

Answer 1

谈不上黑魔法，你看看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

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

Answer 2

import ReactDOM from 'react-dom'

ReactDOM.createPortal(child, container)