devbox
编程革命者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件...

作者：编程革命者 | 2024-01-29 14:32:19

赞

踩

drawerprops

前言

本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余.

之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根据已有前端的开发经验,总结出一套自己的高效开发的方法.

作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心. 为了让工程师们有更多的时间去考虑业务和产品迭代,我们不得不掌握高质量组件设计的思路和方法.所以笔者将花时间去总结各种业务场景下的组件的设计思路和方法,并用原生框架的语法去实现各种常用组件的开发,希望等让前端新手或者有一定工作经验的朋友能有所收获.

如果对于react/vue组件设计原理不熟悉的,可以参考我的之前写的组件设计系列文章:

正文

在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先看看实现后的组件效果:

1. 组件设计思路

按照之前笔者总结的组件设计原则,我们第一步是要确认需求. 一个抽屉(Drawer)组件会有如下需求点:

  • 能控制抽屉是否可见

  • 能手动配置抽屉的关闭按钮

  • 能控制抽屉的打开方向

  • 关闭抽屉时是否销毁里面的子元素(这个问题是工作中频繁遇到的问题)

  • 指定 Drawer 挂载的 HTML 节点, 可以将抽屉挂载在任何元素上

  • 点击蒙层可以控制是否允许关闭抽屉

  • 能控制遮罩层的展示

  • 能自定义抽屉弹出层样式

  • 可以设置抽屉弹出层宽度

  • 能控制弹出层层级

  • 能控制抽屉弹出方向(上下左右)

  • 点击关闭按钮时能提供回调供开发者进行相关操作

需求收集好之后,作为一个有追求的程序员, 会得出如下线框图:

对于react选手来说,如果没用typescript,建议大家都用PropTypes, 它是react内置的类型检测工具,我们可以直接在项目中导入. vue有自带的属性检测方式,这里就不一一介绍了.

通过以上需求分析, 是不是觉得一个抽屉组件要实现这么多功能很复杂呢? 确实有点复杂,但是不要怕,有了上面精确的需求分析,我们只需要一步步按照功能点实现就好了.对于我们常用的table组件, modal组件等其实也需要考虑到很多使用场景和功能点, 比如antd的table组件暴露了几十个属性,如果不好好理清具体的需求, 实现这样的组件是非常麻烦的.接下来我们就来看看具体实现.

2. 基于react实现一个Drawer组件

2.1. Drawer组件框架设计

首先我们先根据需求将组件框架写好,这样后面写业务逻辑会更清晰:

  1. import PropTypes from 'prop-types'
  2. import styles from './index.less'
  3.  
  4. /**
  5.  * Drawer 抽屉组件
  6.  * @param {visible} bool 抽屉是否可见
  7.  * @param {closable} bool 是否显示右上角的关闭按钮
  8.  * @param {destroyOnClose} bool 关闭时销毁里面的子元素
  9.  * @param {getContainer} HTMLElement 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom
  10.  * @param {maskClosable} bool 点击蒙层是否允许关闭抽屉
  11.  * @param {mask} bool 是否展示遮罩
  12.  * @param {drawerStyle} object 用来设置抽屉弹出层样式
  13.  * @param {width} number|string 弹出层宽度
  14.  * @param {zIndex} number 弹出层层级
  15.  * @param {placement} string 抽屉方向
  16.  * @param {onClose} string 点击关闭时的回调
  17.  */
  18. function Drawer(props) {
  19.   const {
  20.     closable = true,
  21.     destroyOnClose,
  22.     getContainer = document.body,
  23.     maskClosable = true,
  24.     mask = true,
  25.     drawerStyle,
  26.     width = '300px',
  27.     zIndex = 10,
  28.     placement = 'right',
  29.     onClose,
  30.     children
  31.   } = props
  32.  
  33.   const childDom = (
  34.     <div className={styles.xDrawerWrap}>
  35.       <div className={styles.xDrawerMask} ></div>
  36.       <div 
  37.         className={styles.xDrawerContent}
  38.         {
  39.           children
  40.         }
  41.         {
  42.           !!closable && <span className={styles.xCloseBtn}>X</span>
  43.         }
  44.       </div>
  45.     </div>
  46.   )
  47.   return childDom
  48. }
  49.  
  50. export default Drawer

有了这个框架,我们来一步步往里面实现内容吧.

2.2 实现visible, closable, onClose, mask, maskClosable, width, zIndex, drawerStyle

之所以要先实现这几个功能,是因为他们实现都比较简单,不会牵扯到其他复杂逻辑.只需要对外暴露属性并使用属性即可. 具体实现如下:

  1. function Drawer(props) {
  2.   const {
  3.     closable = true,
  4.     destroyOnClose,
  5.     getContainer = document.body,
  6.     maskClosable = true,
  7.     mask = true,
  8.     drawerStyle,
  9.     width = '300px',
  10.     zIndex = 10,
  11.     placement = 'right',
  12.     onClose,
  13.     children
  14.   } = props
  15.  
  16.   let [visible, setVisible] = useState(props.visible)
  17.  
  18.   const handleClose = () => {
  19.     setVisible(false)
  20.     onClose && onClose()
  21.   }
  22.  
  23.   useEffect(() => {
  24.     setVisible(props.visible)
  25.   }, [props.visible])
  26.  
  27.   const childDom = (
  28.     <div 
  29.       className={styles.xDrawerWrap}
  30.       style={{
  31.         width: visible ? '100%' : '0',
  32.         zIndex
  33.       }}
  34.     >
  35.       { !!mask && <div className={styles.xDrawerMask} onClick={maskClosable ? handleClose : null}></div> }
  36.       <div 
  37.         className={styles.xDrawerContent}
  38.         style={{
  39.           width,
  40.           ...drawerStyle
  41.         }}>
  42.         { children }
  43.         {
  44.           !!closable && <span className={styles.xCloseBtn} onClick={handleClose}>X</span>
  45.         }
  46.       </div>
  47.     </div>
  48.   )
  49.   return childDom
  50. }

上述实现过程值得注意的就是我们组件设计采用了react hooks技术, 在这里用到了useState, useEffect, 如果大家不懂的可以去官网学习, 非常简单,如果有不懂的可以和笔者交流或者在评论区提问. 抽屉动画我们通过控制抽屉内容的宽度来实现,配合overflow:hidden, 后面我会单独附上css代码供大家参考.

2.3 实现destroyOnClose

destroyOnClose主要是用来清除组件缓存,比较常用的场景就是输入文本,比如当我是的抽屉的内容是一个表单创建页面时,我们关闭抽屉希望表单中用户输入的内容清空,保证下次进入时用户能重新创建, 但是实际情况是如果我们不销毁抽屉里的子组件, 子组件内容不会清空,用户下次打开时开始之前的输入,这明显不合理. 如下图所示:

要想清除缓存,首先就要要内部组件重新渲染,所以我们可以通过一个state来控制,如果用户明确指定了关闭时要销毁组件,那么我们就更新这个state,从而这个子元素也就不会有缓存了.具体实现如下:

  1. function Drawer(props) {
  2.   // ...
  3.   let [isDesChild, setIsDesChild] = useState(false)
  4.  
  5.   const handleClose = () => {
  6.     // ...
  7.     if(destroyOnClose) {
  8.       setIsDesChild(true)
  9.     }
  10.   }
  11.  
  12.   useEffect(() => {
  13.     // ...
  14.     setIsDesChild(false)
  15.   }, [props.visible])
  16.  
  17.   const childDom = (
  18.     <div className={styles.xDrawerWrap}>
  19.       <div className={styles.xDrawerContent}
  20.         {
  21.           isDesChild ? null : children
  22.         }
  23.       </div>
  24.     </div>
  25.   )
  26.   return childDom
  27. }

上述代码中我们省略了部分不相关代码, 主要来关注isDesChild和setIsDesChild, 这个属性用来根据用户传入的destroyOnClose属性俩判断是否该更新这个state, 如果destroyOnClose为true,说明要更新,那么此时当用户点击关闭按钮的时候, 组件将重新渲染, 在用户再次点开抽屉时, 我们根据props.visible的变化,来重新让子组件渲染出来,这样就实现了组件卸载的完整流程.

2.4 实现getContainer

getContainer主要用来控制抽屉组件的渲染位置,默认会渲染到body下, 为了提供更灵活的配置,我们需要让抽屉可以渲染到任何元素下,这样又怎么实现呢? 这块实现我们可以采用React Portals来实现,具体api介绍如下:

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。

具体使用如下:

  1. render() {
  2.   // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  3.   return ReactDOM.createPortal(
  4.     this.props.children,
  5.     domNode
  6.   );
  7. }

所以基于这个api我们就能把抽屉渲染到任何元素下了, 具体实现如下:

  1. const childDom = (
  2.     <div 
  3.       className={styles.xDrawerWrap}
  4.       style={{
  5.         position: getContainer === false ? 'absolute' : 'fixed',
  6.         width: visible ? '100%' : '0',
  7.         zIndex
  8.       }}
  9.     >
  10.       { !!mask && <div className={styles.xDrawerMask} onClick={maskClosable ? handleClose : null}></div> }
  11.       <div 
  12.         className={styles.xDrawerContent}
  13.         style={{
  14.           width,
  15.           [placement]: visible ? 0 : '-100%',
  16.           ...drawerStyle
  17.         }}>
  18.         {
  19.           isDesChild ? null : children
  20.         }
  21.         {
  22.           !!closable && <span className={styles.xCloseBtn} onClick={handleClose}>X</span>
  23.         }
  24.       </div>
  25.     </div>
  26.   )
  27.  
  28.   return getContainer === false ? childDom
  29.             : ReactDOM.createPortal(childDom, getContainer)

因为这里getContainer要支持3种情况,一种是用户不配置属性,那么默认就挂载到body下,还有就是用户传的值为false, 那么就为最近的父元素, 他如果传一个dom元素,那么将挂载到该元素下,所以以上代码我们会分情况考虑,还有一点要注意,当抽屉打开时,我们要让父元素溢出隐藏,不让其滚动,所以我们在这里要设置一下:

  1. useEffect(() => {
  2.     setVisible(() => {
  3.       if(getContainer !== false && props.visible) {
  4.         getContainer.style.overflow = 'hidden'
  5.       }
  6.       return props.visible
  7.     })
  8.     setIsDesChild(false)
  9.   }, [props.visible, getContainer])

当关闭时恢复逻辑父级的overflow, 避免影响外部样式:

  1. const handleClose = () => {
  2.     onClose && onClose()
  3.     setVisible((prev) => {
  4.       if(getContainer !== false && prev) {
  5.         getContainer.style.overflow = 'auto'
  6.       }
  7.       return false
  8.     })
  9.     if(destroyOnClose) {
  10.       setIsDesChild(true)
  11.     }
  12.   }
2.5 实现placement

placement主要用来控制抽屉的弹出方向, 可以从左弹出,也可以从右弹出, 实现过程也比较简单,我们主要要更具属性动态修改定位属性即可,这里我们会用到es新版的新特性,对象的变量属性. 核心代码如下:

  1. <div 
  2.   className={styles.xDrawerContent}
  3.   style={{
  4.     width,
  5.     [placement]: visible ? 0 : '-100%',
  6.     ...drawerStyle
  7.     }}>
  8.  </div>

这样,无论是上下左右,都可以完美实现了.

2.6 健壮性支持, 我们采用react提供的propTypes工具:
  1. import PropTypes from 'prop-types'
  2. // ...
  3. Drawer.propTypes = {
  4.   visible: PropTypes.bool,
  5.   closable: PropTypes.bool,
  6.   destroyOnClose: PropTypes.bool,
  7.   getContainer: PropTypes.element,
  8.   maskClosable: PropTypes.bool,
  9.   mask: PropTypes.bool,
  10.   drawerStyle: PropTypes.object,
  11.   width: PropTypes.oneOfType([
  12.     PropTypes.string,
  13.     PropTypes.number
  14.   ]),
  15.   zIndex: PropTypes.number,
  16.   placement: PropTypes.string,
  17.   onClose: PropTypes.func
  18. }

关于prop-types的使用官网上有很详细的案例,这里说一点就是oneOfType的用法, 它用来支持一个组件可能是多种类型中的一个. 组件相关css代码如下:

  1. .xDrawerWrap {
  2.   top: 0;
  3.   height: 100vh;
  4.   overflow: hidden;
  5.   .xDrawerMask {
  6.     position: absolute;
  7.     left: 0;
  8.     right: 0;
  9.     top: 0;
  10.     bottom: 0;
  11.     background-color: rgba(0, 0, 0, .5);
  12.   }
  13.   .xDrawerContent {
  14.     position: absolute;
  15.     top: 0;
  16.     padding: 16px;
  17.     height: 100%;
  18.     transition: all .3s;
  19.     background-color: #fff;
  20.     box-shadow: 0 0 20px rgba(0,0,0, .2);
  21.     .xCloseBtn {
  22.       position: absolute;
  23.       top: 10px;
  24.       right: 10px;
  25.       color: #ccc;
  26.       cursor: pointer;
  27.     }
  28.   }
  29. }

通过以上步骤, 一个功能强大的的drawer组件就完成了,关于代码中的css module和classnames的使用大家可以自己去官网学习,非常简单.如果不懂的可以在评论区提问,笔者看到后会第一时间解答.

最后

后续笔者将会继续实现

  • modal(模态窗),

  • alert(警告提示),

  • badge(徽标),

  • table(表格),

  • tooltip(工具提示条),

  • Skeleton(骨架屏),

  • Message(全局提示),

  • form(form表单),

  • switch(开关),

  • 日期/日历,

  • 二维码识别器组件

等组件, 来复盘笔者多年的组件化之旅.

如果想获取组件设计系列完整源码, 或者想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》学习讨论，共同探索前端的边界。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号