古风小说,梦入神机,盗墓笔记txt全集下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

配合ReactPortals實(shí)現(xiàn)一個功能強(qiáng)大的抽屜(Drawer)組件

[[429338]]

正文

在開始組件設(shè)計之前希望大家對css3和js有一定的基礎(chǔ),并了解基本的react/vue語法.我們先看看實(shí)現(xiàn)后的組件效果:

1. 組件設(shè)計思路

按照之前筆者總結(jié)的組件設(shè)計原則,我們第一步是要確認(rèn)需求. 一個抽屜(Drawer)組件會有如下需求點(diǎn):

能控制抽屜是否可見
能手動配置抽屜的關(guān)閉按鈕
能控制抽屜的打開方向
關(guān)閉抽屜時是否銷毀里面的子元素(這個問題是工作中頻繁遇到的問題)
指定 Drawer 掛載的 HTML 節(jié)點(diǎn), 可以將抽屜掛載在任何元素上
點(diǎn)擊蒙層可以控制是否允許關(guān)閉抽屜
能控制遮罩層的展示
能自定義抽屜彈出層樣式
可以設(shè)置抽屜彈出層寬度
能控制彈出層層級
能控制抽屜彈出方向(上下左右)
點(diǎn)擊關(guān)閉按鈕時能提供回調(diào)供開發(fā)者進(jìn)行相關(guān)操作

需求收集好之后,作為一個有追求的程序員, 會得出如下線框圖:

對于react選手來說,如果沒用typescript,建議大家都用PropTypes, 它是react內(nèi)置的類型檢測工具,我們可以直接在項目中導(dǎo)入. vue有自帶的屬性檢測方式,這里就不一一介紹了.

通過以上需求分析, 是不是覺得一個抽屜組件要實(shí)現(xiàn)這么多功能很復(fù)雜呢? 確實(shí)有點(diǎn)復(fù)雜,但是不要怕,有了上面精確的需求分析,我們只需要一步步按照功能點(diǎn)實(shí)現(xiàn)就好了.對于我們常用的table組件, modal組件等其實(shí)也需要考慮到很多使用場景和功能點(diǎn), 比如antd的table組件暴露了幾十個屬性,如果不好好理清具體的需求, 實(shí)現(xiàn)這樣的組件是非常麻煩的.接下來我們就來看看具體實(shí)現(xiàn).

2. 基于react實(shí)現(xiàn)一個Drawer組件

2.1. Drawer組件框架設(shè)計

首先我們先根據(jù)需求將組件框架寫好,這樣后面寫業(yè)務(wù)邏輯會更清晰:

 
 
 
 
  
  
  
  import PropTypes from 'prop-types' 
  
  
  
  import styles from './index.less' 
  
  
  
   
  
  
  
  /** 
  
  
  
   * Drawer 抽屜組件 
  
  
  
   * @param {visible} bool 抽屜是否可見 
  
  
  
   * @param {closable} bool 是否顯示右上角的關(guān)閉按鈕 
  
  
  
   * @param {destroyOnClose} bool 關(guān)閉時銷毀里面的子元素 
  
  
  
   * @param {getContainer} HTMLElement 指定 Drawer 掛載的 HTML 節(jié)點(diǎn), false 為掛載在當(dāng)前 dom 
  
  
  
   * @param {maskClosable} bool 點(diǎn)擊蒙層是否允許關(guān)閉抽屜 
  
  
  
   * @param {mask} bool 是否展示遮罩 
  
  
  
   * @param {drawerStyle} object 用來設(shè)置抽屜彈出層樣式 
  
  
  
   * @param {width} number|string 彈出層寬度 
  
  
  
   * @param {zIndex} number 彈出層層級 
  
  
  
   * @param {placement} string 抽屜方向 
  
  
  
   * @param {onClose} string 點(diǎn)擊關(guān)閉時的回調(diào) 
  
  
  
   */ 
  
  
  
  function Drawer(props) { 
  
  
  
    const { 
  
  
  
      closable = true, 
  
  
  
      destroyOnClose, 
  
  
  
      getContainer = document.body, 
  
  
  
      maskClosable = true, 
  
  
  
      mask = true, 
  
  
  
      drawerStyle, 
  
  
  
      width = '300px', 
  
  
  
      zIndex = 10, 
  
  
  
      placement = 'right', 
  
  
  
      onClose, 
  
  
  
      children 
  
  
  
    } = props 
  
  
  
   
  
  
  
    const childDom = (

className={styles.xDrawerContent}

{

children

}

{

!!closable && X

}

)

return childDom

}

export default Drawer

有了這個框架,我們來一步步往里面實(shí)現(xiàn)內(nèi)容吧.

2.2 實(shí)現(xiàn)visible, closable, onClose, mask, maskClosable, width, zIndex, drawerStyle

之所以要先實(shí)現(xiàn)這幾個功能,是因?yàn)樗麄儗?shí)現(xiàn)都比較簡單,不會牽扯到其他復(fù)雜邏輯.只需要對外暴露屬性并使用屬性即可. 具體實(shí)現(xiàn)如下:

 
 
 
 
  
  
  
  function Drawer(props) { 
  
  
  
    const { 
  
  
  
      closable = true, 
  
  
  
      destroyOnClose, 
  
  
  
      getContainer = document.body, 
  
  
  
      maskClosable = true, 
  
  
  
      mask = true, 
  
  
  
      drawerStyle, 
  
  
  
      width = '300px', 
  
  
  
      zIndex = 10, 
  
  
  
      placement = 'right', 
  
  
  
      onClose, 
  
  
  
      children 
  
  
  
    } = props 
  
  
  
   
  
  
  
    let [visible, setVisible] = useState(props.visible) 
  
  
  
   
  
  
  
    const handleClose = () => { 
  
  
  
      setVisible(false) 
  
  
  
      onClose && onClose() 
  
  
  
    } 
  
  
  
   
  
  
  
    useEffect(() => { 
  
  
  
      setVisible(props.visible) 
  
  
  
    }, [props.visible]) 
  
  
  
   
  
  
  
    const childDom = ( 
  
  
  
      
  
  
  
  
      className={styles.xDrawerWrap} 
  
  
  
        style={{ 
  
  
  
          width: visible ? '100%' : '0', 
  
  
  
          zIndex 
  
  
  
        }} 
  
  
  
      > 
  
  
  
        { !!mask &&

}

className={styles.xDrawerContent}

style={{

width,

...drawerStyle

}}>

{ children }

{

!!closable && X

}

)

return childDom

}

上述實(shí)現(xiàn)過程值得注意的就是我們組件設(shè)計采用了react hooks技術(shù), 在這里用到了useState, useEffect, 如果大家不懂的可以去官網(wǎng)學(xué)習(xí), 非常簡單,如果有不懂的可以和筆者交流或者在評論區(qū)提問. 抽屜動畫我們通過控制抽屜內(nèi)容的寬度來實(shí)現(xiàn),配合overflow:hidden, 后面我會單獨(dú)附上css代碼供大家參考.

2.3 實(shí)現(xiàn)destroyOnClose

destroyOnClose主要是用來清除組件緩存,比較常用的場景就是輸入文本,比如當(dāng)我是的抽屜的內(nèi)容是一個表單創(chuàng)建頁面時,我們關(guān)閉抽屜希望表單中用戶輸入的內(nèi)容清空,保證下次進(jìn)入時用戶能重新創(chuàng)建, 但是實(shí)際情況是如果我們不銷毀抽屜里的子組件, 子組件內(nèi)容不會清空,用戶下次打開時開始之前的輸入,這明顯不合理. 如下圖所示:

要想清除緩存,首先就要要內(nèi)部組件重新渲染,所以我們可以通過一個state來控制,如果用戶明確指定了關(guān)閉時要銷毀組件,那么我們就更新這個state,從而這個子元素也就不會有緩存了.具體實(shí)現(xiàn)如下:

 
 
 
 
  
  
  
  function Drawer(props) { 
  
  
  
    // ... 
  
  
  
    let [isDesChild, setIsDesChild] = useState(false) 
  
  
  
   
  
  
  
    const handleClose = () => { 
  
  
  
      // ... 
  
  
  
      if(destroyOnClose) { 
  
  
  
        setIsDesChild(true) 
  
  
  
      } 
  
  
  
    } 
  
  
  
   
  
  
  
    useEffect(() => { 
  
  
  
      // ... 
  
  
  
      setIsDesChild(false) 
  
  
  
    }, [props.visible]) 
  
  
  
   
  
  
  
    const childDom = ( 
  
  
  
       
  
  
  
        
  
  
  
  
        { 
  
  
  
            isDesChild ? null : children 
  
  
  
          }

)

return childDom

}

上述代碼中我們省略了部分不相關(guān)代碼, 主要來關(guān)注isDesChild和setIsDesChild, 這個屬性用來根據(jù)用戶傳入的destroyOnClose屬性倆判斷是否該更新這個state, 如果destroyOnClose為true,說明要更新,那么此時當(dāng)用戶點(diǎn)擊關(guān)閉按鈕的時候, 組件將重新渲染, 在用戶再次點(diǎn)開抽屜時, 我們根據(jù)props.visible的變化,來重新讓子組件渲染出來,這樣就實(shí)現(xiàn)了組件卸載的完整流程.

2.4 實(shí)現(xiàn)getContainer

getContainer主要用來控制抽屜組件的渲染位置,默認(rèn)會渲染到body下, 為了提供更靈活的配置,我們需要讓抽屜可以渲染到任何元素下,這樣又怎么實(shí)現(xiàn)呢? 這塊實(shí)現(xiàn)我們可以采用React Portals來實(shí)現(xiàn),具體api介紹如下:

Portal 提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案。第一個參數(shù)(child)是任何可渲染的 React 子元素，例如一個元素，字符串或 fragment。第二個參數(shù)(container)是一個 DOM 元素。

具體使用如下:

 
 
 
 
  
  
  
  render() { 
  
  
  
    // `domNode` 是一個可以在任何位置的有效 DOM 節(jié)點(diǎn)。 
  
  
  
    return ReactDOM.createPortal( 
  
  
  
      this.props.children, 
  
  
  
      domNode 
  
  
  
    ); 
  
  
  
  }

所以基于這個api我們就能把抽屜渲染到任何元素下了, 具體實(shí)現(xiàn)如下:

 
 
 
 
  
  
  
  const childDom = ( 
  
  
  
      
  
  
  
  
      className={styles.xDrawerWrap} 
  
  
  
        style={{ 
  
  
  
          position: getContainer === false ? 'absolute' : 'fixed', 
  
  
  
          width: visible ? '100%' : '0', 
  
  
  
          zIndex 
  
  
  
        }} 
  
  
  
      > 
  
  
  
        { !!mask &&

新聞中心

[[429338]]

正文

1. 組件設(shè)計思路

2. 基于react實(shí)現(xiàn)一個Drawer組件

2.1. Drawer組件框架設(shè)計

2.2 實(shí)現(xiàn)visible, closable, onClose, mask, maskClosable, width, zIndex, drawerStyle

2.3 實(shí)現(xiàn)destroyOnClose

2.4 實(shí)現(xiàn)getContainer

2.5 實(shí)現(xiàn)placement

2.6 健壯性支持, 我們采用react提供的propTypes工具:

最后

其他資訊