react-float react 浮动组件

react-float 是一直都想做的。很早就写了第一版，不过写的自己都觉得看不下去。因为感觉对react原理不熟悉导致第一版实际上完全不能用。

我的想法是做一个组件全局可以任意地方可以打开。因为现在用的很多都是类似antd 从外部定义弹窗当前状态。我希望可以有一个全局的状态控制弹窗的状态。

第一时间想到的是使用redux控制。但是马上就遇到了问题，

1. 必须要使用此组件的使用redux
2. action还有reducer需要靠使用这个包的项目定义，太麻烦了

于是放弃了。

然后又想像redux和react-router这样的模式。外部定义一个组件利用context保存浮动层的状态。 但是也遇到了一个问题就是当顶级的组件状态修改后子组件没有获取到修改后的状态，于是有放弃了旧版的。刚好react 16.3 有现在的新版 context API可以解决这个问题。

这样解决了之后如果使用传统的方式直接条件判断是否渲染的话，因为定义组件时节点的位置就已经定了，多个浮动层同时打开的话会有层级的问题。为了解决这个问题使用了react 16推出的createPortal让每次打开时都创建一个dom节点然后将代码渲染到这个组件中然后append到body中保证最新打开的浮动层始终都在最下层解决了层级的问题。

现在这个包可以控制浮动层的显示以及层级问题，但是项目中的普通地方如何操作浮动层的展示、闭更和新呢？

其实最开始就想好了，解决的方法也特别的简单，和redux的connect与react-router中的withRouter类似的方式，利用一个高阶组件包裹起来在其中props中加入操作浮动层的方法即可。

于是就诞生了react-float。

demo