React Modal 的一种粗暴实现

React Modal 的一种粗暴实现

modal什么的很好做不就是个bool吗，要么显示要么隐藏。

一开始这个modal很简单,

const modal =(isShow)=><div style={{display:isShow?"block":"none"}}>Balbala</div>

但是这个样子的modal很突兀，很粗暴，连你自己也忍不住想加一个fade动画的吧。

在jquery里面那是相当好用，一个接口就搞定了。

fade-out；fade-in用css实现,很常规。

在react里面怎么实现呢。

本文来讲一讲对于modal 的一种粗暴的解决方案，带fadeIn fadeOut动画解决方案。

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation: fadeIn ease .3s forwards;
          animation: fadeIn ease .3s forwards;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fade-out {
  -webkit-animation: fadeOut ease .3s forwards;
          animation: fadeOut ease .3s forwards;
}
.modal.fade-out{
    pointer-events: none;
}

在使用react的时候将你的modal放在父级组件的时候：

1. 通过props提供接口访问。至少需要两个接口，一个bool变量用来控制是否显示，一个关闭的回调函数用来改变它的状态:bool isVisible,void onClose()

2. 除了通过接口的方法控制以外，还可以使用ref。 在modal内部实现显示隐藏的逻辑。然后ref到组件实例，至少需要两个接口void show();void hide(),然而这种方式实现起来的缺陷就是，每次使用的时候得先ref到组件的实例；这种写法自身需要维护自己的显示隐藏状态。

在生命周期 componentWillMount时判断初始状态是否为显示。如果初始状态为不显示，则延迟挂载，防止fadeIn动画闪烁的副作用。

如果一开始modal就是不可见状态的话，modal在挂载的时候会fadeOut一下，那么你就会看见在视图上你的弹窗突然一下消失。实际上，我们并不想让它发生消失这件事。因为一开始的时候他是藏起来的就可以了。然而fadeoout这类的动画它是把opacity从1变到0；

所以我们不得不需要一个状态 hide 在一开始的时候将自己设置为hide，在props发生改变的时候对modal的显示和隐藏状态作出改变。并且至此以后再也不需要这个hide了。因为model已经进入了。

将真实render在componentWillReceiveProps中判断好逻辑后再显示出来。

class Modal extends Component {
    constructor(props){
        super(props);
        this.isFixed = false;
    }

    componentWillMount(){
        console.log(this.props);
        /*
         * 初始状态为false的情况下，默认不可见;
         * 为防止fadeOut触发，做以下操作。
         * */
        if( this.props.visible ){
            this.isFixed = true;
            this.render    = this.renderCurrent;
        }
    }

    componentWillReceiveProps(np){
        /*
        * magic
        */
        if( this.props.visible !== np.visible ){
            if( !this.isFixed ){
                this.render    = this.renderCurrent;
                this.isFixed = true;
            }
        }
    }

    renderCurrent(){
        const { visible,onClose } = this.props;
        return <div onClick={onClose}
                    className={visible ? "modal fade-in" : "modal fade-out"}>
            <div className="content">
                <div>BALABALABLA</div>
            </div>
        </div>
    }
    render(){
        return <div/>
    }
}

在组件的上下文通过成员变量isFixed 来判断是不是已经完成了我们的modal fix行为。

因为js的灵活性，这样实现起来是没有问题的，对于性能来说，也没有问题。

如果你要快速实现一个modal，并要求能够有fadeIn,fadeOut 这种过度下过的话。
这个是来的最简单的方式了。

在antd中，实现modal通过在React的RootNode createClass完成。
当第一次render的时候，如果你的modal是不显示的话，它在Dom里面其实就是个

当props发生有关isVisible的变化的时候，才真正的渲染了modal的dom结构。isVisible再次变化为false的时候，dom结构还是modal的dom结构，改变的只是一个fade类名。

如果不使用第三方框架。强烈建议这种野路子的写法。

当然，你还需要一个wrap层，弄成fixed的，然后你的modal窗体应该是absolute的,通过margin调整位置。给你的wrap在设置一个rgba的浅黑色背景，然后再在wrap上增加点击效果，使它可以点击遮罩关闭。

当然这个时候你又遇到了另一个新问题

因为事件传递，你又到modal的事件handle里加上了preventDefault。

到此 基本上实现了一个可以用的modal 了。

另外的，给这个modal增加一些新的props,像增加一些诸如 title啊content啊 contentGetter啊这种东西，哇晒可以复用了。

当然，fadeout之外也可以使用slide，flip， scale，boom等。

那么如何实现 在函数内部调用一个方法来显示一个modal呢。

比如：

handleBtnClick(){
    modal.info("hello");
    modal.confirm({
        title:"dasd",
        content:"dasdas",
        onOk(){},
        onCancel(){}
    })
    modal.modal(reactElement)
    modal.warning({
    })
}

这种写法也是很风骚，那么怎么实现呢。下次再说啊。