react protals的使用

遇到的場景：咱們要實現一個配置手機頁面的網站，手機頁面裏的組件有一個能夠吸底的button，也就是固定在手機頁面的最底下，常見的確定是給button添加fixed屬性，可是在這個配置網站裏給定fixed，會讓button脫離咱們虛擬手機模型。

解決辦法：給父元素添加transfrom:translate(0)樣式，他會讓全部子元素裏面的全部fixed定位變成absolute

開始咱們的結構以下:

html結構

<div class="phone_wrap">
        <div class="box">123</div>
        <div class="box">123</div>
        <div class="box">123</div>
        <div class="under">under</div>
    </div>

css結構

.phone_wrap {
    margin: 100px auto;
    border: 1px solid #000;
    width: 320px;
    height: 620px;
    position: relative;
    overflow: scroll;
    transform: translate(0);
}
.box {
    box-sizing: border-box;
    width: 100%;
    height: 300px;
    background-color: pink;
    border: 1px solid #000;
    margin: 3px 0;
}
.under {
    border: 1px solid red;
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
}

可是實現效果卻和咱們想的不太同樣，定位以後的位置會隨着內容的滾動而滾動

解決途徑：添加一個內部div，讓他實現內容的滾動，也就是將overflow:scroll賦值給內部div，而後給外層容器porsition:relative屬性，讓under相對外部定位

html結構

<div class="phone_wrap">
        <div class="screen">
            <div class="box">123</div>
            <div class="box">123</div>
            <div class="box">123</div>
            <div class="under">under</div>
        </div>
    </div>

css結構

.phone_wrap {
    position: relative;
    transform: translate(0);
}
.screen {
    width: 100%;
    height: 100%;
    overflow: scroll;
}

實現效果：

用到咱們實際的項目中，因爲咱們的模擬手機裏面使用react-beautiful-dnd組件，實現拖拽效果，而這個拖拽效果顯示你拖拽元素的位置是經過fixed定位實現的，就致使咱們拖拽時組件位置錯亂。

參考方案:經過react16中提供的protals，使組件能夠脫離父組件層級掛載在DOM樹的任何位置（實際上不可行，拖拽組件掛載在外面，沒有了外層的dragbel的包裹是沒法實現咱們想要的拖拽效果，最終是給fixed定位的元素動態在外層套一個div賦值transfrom:translate(0)）

protals

1. Portals的做用簡單的說就是爲了便於開發「彈窗」、「對話框」、「浮動卡片」、「提示窗」等脫離標準文檔流的組件
2. 在組件return的時候
3. 使用實例

   //建立一個protalsDom封裝組件的高階函數
   //protals.js
   import ReactDOM from 'react-dom';
   
   const parent = document.getElementById("root");
   const protalsDom = (props) => {
       return ReactDOM.createPortal(
           props.children,
           parent
       )
   }
   
   export default protalsDom;

   //APP.js裏面使用這個，將123這個div掛載到根節點下面，而不受top這個div樣式的影響
   import React from 'react';
   import './styles/app.css';
   
   import ProtalsDom from './components/protalsDom'
   
   const TestProtals = (props)=> {
       return (
           <div className="top">
               <ProtalsDom>
                   <div className="inner">123</div>
               </ProtalsDom>
           </div>
       )
   }
   
   export default TestProtals;

   呈現效果

    

4. protals在react-beatiful-dnd的使用https://reactjs.org/docs/portals.html