Portals
一、Portals
插槽:将一个React元素渲染到指定的DOM容器中
ReactDOM.createPortal(React元素, 真实的DOM容器),该函数返回一个React元素
//public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<style>
.modal {
position: fixed;
left: 0;
top: 20%;
width: 100%;
height: 80%;
background: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div id="root"></div>
<div class="modal"></div>
</body>
</html>
Portals可以将react元素渲染到指定的dom元素中。
import React from 'react'
import ReactDOM from "react-dom"
function ChildA() {
return ReactDOM.createPortal(<div className="child-a" style={{
marginTop: 200
}}>
<h1>ChildA</h1>
<ChildB />
</div>, document.querySelector(".modal"));
}
function ChildB() {
return <div className="child-b">
<h1>ChildB</h1>
</div>
}
export default function App() {
return (
<div className="app" onClick={e => {
console.log("App被点击了", e.target)
}}>
<h1>App</h1>
<ChildA />
</div>
)
}
虽然我们的页面显示的是真实的dom结构,不过由于react中的事件是经过包装的,所以事件源等实际上遵循的仍是react虚拟dom的结构(如冒泡事件)。
注意事件冒泡
- React中的事件是包装过的
- 它的事件冒泡是根据虚拟DOM树来冒泡的,与真实的DOM树无关。
博主开始运营自己的公众号啦,感兴趣的可以关注“飞羽逐星”微信公众号哦,拿起手机就能阅读感兴趣的博客啦!