如何将一个react组件进行静态化调用

ant-design的message组件可以使用message.xxx的方法调用，调用代码如下：

import { message, Button } from 'antd';

const info = () => {
  message.info('This is a normal message');
};

ReactDOM.render(
  <Button type="primary" onClick={info}>
    Display normal message
  </Button>,
  mountNode,
);

message组件支持静态化调用的关键代码如下:

 * 支持静态方法调用：Message.show(message, [type = 'success'], [duration = 3], [onClose = null])
 * @class Message
 * @extends {Component}
 */
class Message extends Component {
    static propTypes={
      type: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired, // 消息类型
      message: PropTypes.node, // 消息内容
      onClose: PropTypes.func, // 关闭时的回调
      duration: PropTypes.number // 自动关闭的延时，单位秒。设为 0 时不自动关闭。
    }
    state={open: true}
    static defaultProps={duration: 2}
    handleClose() {
      this.setState({open: false}, () => {
        this.props.onClose && this.props.onClose()
      })
    }
    render() {
      const {message} = this.props
      return (
        <div>{message}</div>
      )
    }
}
// 静态调用方式
Message.show = function successInfo(message, type = 'success', duration = 2, onClose = null) {
  let messageContainer = document.getElementById('message-container')
  if (!messageContainer) {
    messageContainer = document.createElement('div')
    messageContainer.id = 'message-container'
    document.body.appendChild(messageContainer)
  }
  const reactElement = ReactDOM.createPortal(
    <Message type={type} message={message} duration={duration} onClose={onClose} />,
    document.body,
    +new Date()
  )
  ReactDOM.render(reactElement, messageContainer)
}
export default Message