关于antd modal组件使用的一些新得

首先我在用modal组件的时候先把modal组件又封了一层，代码

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import cx from 'classnames'
import { Modal } from 'antd';

import './index.less';

@inject('UI')
@observer
export default class extends Component {
  constructor (props) {
    super(props)
    this.state = {

    }
  }

  getModalStyle = (w, h) => {
    const winw = window.innerWidth
    const winh = window.innerHeight
    const modalStyle = {

    if (winh > h) {
      modalStyle.top = (winh - h) / 2
    }
    return {} // modalStyle
  }

  render () {
    const { visible, width, height, noPadding, className } = this.props
    // 弹窗居中显示
    const style = this.getModalStyle(width, height)
    const sizeStyle = `_${width}_${height}`
    let props = { ...this.props }
    delete props.className

    if (height) {
      style.height = height
    }

    return (
      <Modal {...props} visible={ visible }  maskClosable={false} className={cx('beautiful-modal', sizeStyle, this.props.className, {'no-padding':noPadding})} style={style}>
      </Modal>
    )
  }
}

这样就可以对自己的modal进行自己的设计，但是modal组件的方法还是可以的用的，这样的封装只是对原来modal组件的样式进行隐藏，然后根据自己的需求来设计。

 然后在使用modal时候，下次再打开这个组件的时候想把里面的内容销毁，目前modal api已经提供了destroyOnClose这个方法，

另外还有一个属性zIndex这个属性，是用来设置多个弹窗的显示层次的，为什么要提到这个属性呢，因为我遇到4个弹窗同时出现，最后一个点开的弹窗本应该优先级是最高的，但是会出现前面的弹窗把这个最后打开的弹窗覆盖掉，所以要用到这个zIndex这个属性，通过设置这个的值保证弹窗就不会出现叠放混乱的问题了。