React Collapsible 组件

使用方法

importCollapsiblefrom"./Collapsible";renderHead=()=>{return(<divclassName="header">header</div>)}<Collapsibletrigger={this.renderHead()}onOpen={this.handleOnOpen}onClose={this.handleOnClose}onOpening={this.handleOnOpening}onClosing={this.handleOnClosing}><divclassName={className}>
content
</div></Collapsible>

关键点

• 如何更新Collapsible 内部的内容的高度
  • 整个项目中，height 共有三个值，auto/ 0 / this.innerRef.current.scrollHeight ，也就是根本就不用去计算，

  react-bootstrap中设置高度是 offsetHeight + marginTop + marginBottom

• 如何实现动画的效果
  • 使用原生的 transition 动画，设置属性为 height ，时间为用户设置的时间，默认的动画效果为linear ，动画效果可以提供给用户设置，可以设置的动画效果为 transition 动画效果集
  • 有个点需要单独说一下，每次动画更新的时候，都会把height设置为具体的高度，然后再设置为0或者是auto，这个应该是为了触发动画，如果直接设置为0或者auto，很可能就没有动画效果了
  • 在内容动画的过程中，如果多次触发动画，会导致动画失效的问题，解决办法是，增加动画时候的状态，在动画的过程中，点击触发动画无效，待动画完成后可继续点击
• 懒加载
  • lazyRender 在折叠的时候不加载内部内容，直到展开的时候
• 其他的附加效果
  • 开始展开动画时候的事件
    • 在打开的时候，调用 onOpening 事件
  • 开始结束展开动画时候的事件
    • 在收起的时候，调用 onClosing 事件
  • 已展开的事件
    • 使用的元素上的 onTransitionEnd 事件，这时候判断当前状态是展开还是收起了，如果展开那就调用 onOpen ，如果结束就调用 onClose 事件
• 用户可以自行接管动画的触发效果
  • 在 triggerContainer 中触发的动画，用户可以自行接管，比如在 contentContainer 中设置默认的 transition样式，当触发动画时 添加 className 为show，也就是触发之后的动画属性, 这样就能够实现动画效果了。

注：Idea 和源码参考 react-collapsible，但我觉得我写的更好，还给对方修复了多次触发导致动画失效的bug