如何将一个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 container = document.querySelector('#com-confirm-container');

if (!container) {

container = document.createElement('div');

container.id = 'com-confirm-container';

document.body.appendChild(container);

}

    ReactDOM.render(<Message type={type} message={message} duration={duration} onClose={onClose} />, messageContainer) 
} 
export default Message