使用場景
在項目中主要是我們遇到彈框,嵌套岑寂較深時,我們可以將定義組件傳送到相應位置,讓其嵌套層級並沒有那么深。例如以下例子。
使用代碼
/** * 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、使用時: