React createPortal 傳送門相關代碼實現,主要優化代碼使用


使用場景

  在項目中主要是我們遇到彈框,嵌套岑寂較深時,我們可以將定義組件傳送到相應位置,讓其嵌套層級並沒有那么深。例如以下例子。

使用代碼

/**
 * reactDom 中 傳送門 createPortal 使用
 * 組件加載在最外層body上
 */
import React from 'react';
import ReactDom, { createPortal } from 'react-dom';

const ModalComp = () => {
    return (
        <div style={{ position: 'absolute', top: '20%', left: '30%', height: '300px', width: '300px', border: '1px solid #ddd'}}>
            1234565
        </div>
    )
}


class ProtalComp extends React.Component {
    render() {
        return (
            <div>
                {createPortal(<ModalComp />, document.querySelector('body'))}
            </div>
        )
    }
}

export default ProtalComp;

導出結果對比:

  1、沒有使用createPortal時:

  

  2、使用時:

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM