ReactPortals(Portal)

时间：2023-03-31 20:38:53 vue.js

ReactPortal鎻愪緵浜嗕竴涓紭绉€鐨勮В鍐虫柟妗堬紝鍙互灏嗗瓙鑺傜偣娓叉煋鍒癉OM鑺傜偣鑰屼笉鏄埗缁勪欢銆侾ortals鏈€甯歌鐨勭敤渚嬫槸闇€瑕佸湪瑙嗚涓婂皢瀛愮粍浠朵笌鐖跺鍣ㄥ垎寮€锛屽涓嬫墍绀恒€傛ā鎬佸璇濇宸ュ叿鎻愮ず鎮诞鍗＄墖鍔犺浇鍔ㄧ敾鍙互浣跨敤ReactDOM.createPortal(child,container)鍒涘缓涓€涓狿ortal銆傝繖閲宑hild鏄竴涓猂eact鍏冪礌锛宖ragment鐗囨鎴栬€呭瓧绗︿覆锛宑ontainer鏄疨ortal瑕佹彃鍏ョ殑DOM鑺傜偣鐨勪綅缃€備笅闈㈡槸涓€涓娇鐢≧eactDOM.createPortal(child,container)鍒涘缓鐨勭畝鍗曟ā鎬佺粍浠躲€俢onstModal=({message,isOpen,onClose,children})=>{if(!isOpen)returnnull;returnReactDOM.createPortal({message}/span>Close

,domNode);};鍗充娇Portal鍦ㄧ埗DOM鍏冪礌涔嬪鍛堢幇锛屽畠鐨勮涓轰笌React缁勪欢涓殑閫氬父琛屼负鐩稿悓锛屼笌.瀹冨彲浠ユ帴鍙楅亾鍏峰拰涓婁笅鏂嘇PI銆傝繖鏄洜涓篜ortal椹荤暀鍦≧eactTree灞傛缁撴瀯涓紙涔熷氨鏄锛屼繚璇佸湪鍚屼竴ReactTree涓級銆傛垜浠负浠€涔堥渶瑕佸畠锛熷綋鎴戜滑鍦ㄧ壒瀹氬厓绱狅紙鐖剁粍浠讹級涓娇鐢ㄦā鎬佸脊绐楁椂锛屾ā鎬佸脊绐楃殑楂樺害鍜屽搴︿細缁ф壙妯℃€佸脊绐楁墍鍦ㄧ殑缁勪欢锛岃繖鎰忓懗鐫€妯℃€佸脊绐楃殑鏍峰紡鍙兘浼氬彈鍒扮埗缁勪欢銆備紶缁熸ā寮忛渶瑕丆SS灞炴€э紝渚嬪overflow:hidden鍜寊-index鏉ラ伩鍏嶈繖涓棶棰樸€備笂闈㈢殑浠ｇ爜绀轰緥灏嗗鑷存ā鎬佹鍦ㄦ牴鐩綍涓嬬殑宓屽缁勪欢涓憟鐜般€備娇鐢ㄦ祻瑙堝櫒妫€鏌ュ厓绱犳椂锛屽涓嬫墍绀恒€傛帴涓嬫潵鎴戜滑鐪嬬湅ReactPortal鏄浣曚娇鐢ㄧ殑銆備笅闈㈢殑浠ｇ爜浣跨敤createPortal()鍦ㄦ牴鏍戝眰娆＄粨鏋勪箣澶栧垱寤篋OM鑺傜偣鏉ヨВ鍐宠繖涓棶棰樸€俢onstModal=({message,isOpen,onClose,children})=>{if(!isOpen)returnnull;returnReactDOM.createPortal({message}Close

,document.body);};function缁勪欢(){const[open,setOpen]=useState(false);return(setOpen(true)}>OpenModalsetOpen(false)}/>

);}涓嬮潰鏄剧ず鐨勬槸鎮ㄥ湪浣跨敤ReactPortal鏃惰幏寰楃殑DOM鏍戝眰娆＄粨鏋勶紝鍏朵腑妯℃€佺粍浠跺皢琚敞鍏ュ閮ㄥ苟涓庢牴澶勪簬鍚屼竴绾у埆銆傜敱浜庢妯℃€佹鏄湪鏍瑰眰娆＄粨鏋勪箣澶栧憟鐜扮殑锛屽洜姝ゆā鎬佹鐨勫ぇ灏忎笉浼氬洜浠庣埗缁勪欢缁ф壙鑰屾敼鍙樸€傛偍鍙互鍦–odeSandbox涓壘鍒版绀轰緥锛屾偍鍙互鍦ㄥ叾涓煡鐪嬪拰淇敼浠ｇ爜浠ユ煡鐪嬮棬鎴风殑宸ヤ綔鍘熺悊骞惰В鍐虫垜浠璁虹殑闂銆備粈涔堟椂鍊欎娇鐢ㄩ棬鎴凤紵鍦ㄤ娇鐢≧eactPortal鏃讹紝闇€瑕佹敞鎰忓嚑涓柟闈€傞櫎闈炰綘浜嗚ВReactPortal锛屽惁鍒欎互涓嬭涓轰笉瀹规槗妫€娴嬪埌銆傚洜姝わ紝杩欓噷鎻愬埌銆備簨浠跺啋娉″皢姝ｅ父宸ヤ綔鈥斺€旈€氳繃灏嗕簨浠朵紶鎾埌React鏍戜腑鐨勭鍏堬紝鏃犺Portal鑺傜偣鍦―OM涓殑浣嶇疆濡備綍锛屼簨浠跺啋娉￠兘灏嗘寜棰勬湡宸ヤ綔銆俁eact鍙互鎺у埗Portal鑺傜偣鍙婂叾鐢熷懡鍛ㄦ湡鈥斺€斿綋瀛愬厓绱犻€氳繃Portal鍛堢幇鏃讹紝React浠嶇劧鍙互鎺у埗瀹冧滑鐨勭敓鍛藉懆鏈熴€俁eactPortal鍙奖鍝岲OM缁撴瀯鈥斺€擯ortal鍙奖鍝岺TMLDOM缁撴瀯锛屼笉褰卞搷React缁勪欢鏍戙€傞瀹氫箟鐨凥TML鎸傝浇鐐光€斺€斿湪浣跨敤ReactPortal鏃讹紝闇€瑕侀鍏堝畾涔変竴涓狧TMLDOM鍏冪礌浣滀负Portal缁勪欢鐨勬寕杞界偣銆傜粨璁哄綋鎴戜滑闇€瑕佸湪姝ｅ父DOM灞傛缁撴瀯涔嬪娓叉煋瀛愮粍浠惰€屼笉鐮村潖閫氳繃React缁勪欢鏍戝眰娆＄粨鏋勪紶鎾簨浠剁殑榛樿琛屼负鏃讹紝ReactPortal浼氭淳涓婄敤鍦恒€傝繖鍦ㄥ憟鐜版ā鎬併€佸伐鍏锋彁绀恒€佸脊鍑虹獥鍙ｇ瓑缁勪欢鏃跺緢鏈夌敤銆傛偍鍙互鍦≧eact瀹樻柟鏂囨。涓壘鍒版洿澶氬叧浜嶱ortal鐨勬弿杩般€傛劅璋㈡偍鑺辨椂闂撮槄璇绘湰鏂囥€傛垜寰堜箰鎰忓湪涓嬮潰鐨勮瘎璁洪儴鍒嗙湅鍒版偍瀵规涓婚鐨勯棶棰樺拰璇勮銆傪煂堜粖澶╃殑鏂囩珷鍒嗕韩鍒版缁撴潫銆傚鏋滃枩娆㈡湰鏂囷紝璇风偣璧炪€乻tar銆佸叧娉ㄦ垜浣╅浄鎷夌殑缈昏瘧鏉ヨ嚜锛氭帢閲戠炕璇戦」鐩湰鏂囨案涔呴摼鎺ワ細https://github.com/xitu/gold-miner/blob/master/article/2020/鐞嗚В-react-portals.md