React弹窗组件

原文地址 小寒的博客

这里的弹窗泛指全部的弹出组件，这些组件不受页面其余UI布局影响，处于DOM结构的顶层，绝对定位在body元素下。

 

这个特殊性也给它的开发提出了特殊的要求。

 

react新版本中的createPortal Api能够很方便的制造一个组件到制定的dom里。

在componentDidMount中进行ReactDOM.render方法是一个很巧妙的技巧。

 

话很少说，开始贴代码

 

1. 在componentDidMount去渲染dom

class Modal extends React.Component {
  el = null

  componentDidMount() {
    this.el = createElementToModalRoot()
    renderModal(this.el, this.props)
  }

  componentDidUpdate() {
    renderModal(this.el, this.props)
    if (!this.props.visible) {
      unRenderModal(this.el)
    }
  }

  componentWillUnMount() {
    unRenderModal(this.el)
  }

  render() {
    return null
  }
}

 

上边的代码就是弹窗的核心思想，首先建立element在root元素下，而后渲染dom，在unmount或者visible属性为false的时候，卸载弹窗

而更新属性也是经过从新render去渲染的，因为react伟大的diff算法，咱们即便ReactDOM.render从新渲染也不会致使页面刷新，而只是属性的变化引发的页面变更

 

2. createElementToModalRoot方法

function createElementToModalRoot() {
  let modalRoot

  modalRoot = document.getElementById('modal-root')
  if (!modalRoot) {
    modalRoot = document.createElement('div')
    modalRoot.setAttribute('id', 'modal-root')

    const modalMask = document.createElement('div')
    modalMask.setAttribute('id', 'modal-mask')
    document.body.appendChild(modalRoot)
    modalRoot.appendChild(modalMask)
  }

  const el = document.createElement('div')
  modalRoot.appendChild(el);
  return el
}

 

用dom方法建立元素，由于此时componentDidMount因此咱们能够肆无忌惮的进行dom操做了，执行这个方法以后咱们会建立#modal-root #modal-mask 以及 待会render的dom元素

 

3. renderModal方法

const renderModal = (el, props) => {
  const modalRoot = document.getElementById('modal-root')
  const modalMask = document.getElementById('modal-mask')

  modalMask.style.display = 'block'
  modalRoot.style.display = 'block'

  ReactDOM.render(<ModalInner {...props} />, el)
}

 

上面添的代码咱们用ModalInner组件建立了一个去渲染了添加在#modal-root下面的dom，每次更新组件，也是经过他再次渲染

 

4. ModalInner组件

class ModalInner extends React.Component {
  render() {
    const { children, title, visible, onCancel, onOk } = this.props

    return (
      <div className={classnames('modal', visible ? 'modal-animate-in' : 'modal-animate-out')}>
        <div className="modal-head">
          <div className="modal-title">{title}</div>
          <div className="modal-cancel-btn" onClick={onCancel}>+</div>
        </div>
        <div className="modal-content">
          {children}
        </div>
        <div className="modal-footer">
          <button className="do-btn" onClick={onCancel}>取消</button>
          <button className="do-btn do-btn-primary" onClick={onOk}>肯定</button>
        </div>
      </div>
    )
  }
}

 

这个组件，咱们设置了最经常使用的一些属性，包括title children visible 和 onCancel onOk

 

5. unRenderModal方法

最后咱们就剩下卸载方法了

const unRenderModal = (el) => {
  const modalRoot = document.getElementById('modal-root')
  const modalMask = document.getElementById('modal-mask')

  modalMask.style.display = 'none'
  modalRoot.style.display = 'none'

  modalRoot.removeChild(el);
}

 

 

6. 添加动画上边的ModalInner组件里能够看到他会根据visible对dom添加不一样的animate从而产生动画

可是若是unRenderModal方法会直接移除dom，因此不会产生移除动画

 

因此咱们把上边的componentDidMount修改一下

componentDidUpdate() {
    renderModal(this.el, this.props)

    if (!this.props.visible) {
      setTimeout(() => unRenderModal(this.el), 500)
    }
  }

 

7. Modal.open方法

Modal.open = option => {
  const props = {...option}
  const el = createElementToModalRoot()
  const close = () => {
    option.visible = false
    renderModal(el, option)
    setTimeout(() => unRenderModal(el), 500)
  }

  props.visible = true
  props.children = option.content
  props.onOk = e => {
    option.onOk ? option.onOk(e, close) : close()
  }
  props.onCancel = () => {
    option.ononCancel ? option.ononCancel(e, close) : close()
  }

  renderModal(el, props)
}

 

仍是用的上面的那些api，这是visible属性是咱们手动传入组件里的

这样咱们就能够经过非api的形式去打开一个弹窗了

 

 

以上即是render方法建立弹窗的方式，固然很推荐使用createPortal方法，能够省去手动render和unRender的过程