React 传送门 Portals
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
简单粗暴 小栗子🌰
const Toast:React.FC = (props) => {
let node = document.createElement('div')
useEffect(() => {
const app: any = document.querySelector('#tt')
app.appendChild(node)
console.log(app)
}, [node])
return createPortal((
<h3>{props.children}</h3>
), node);
}
通俗一点可以这么理解，Portals 可以吧 当前jsx文件 渲染绕其他组件的 Element元素上
👆上面的栗子🌰
- node可以理解为一个容器，用来承载当前的jsx 组件
- app 是目的dom元素
⚠️注意点比较简单
- 就是要把
createPortal放在render后面,来返回渲染，函数组件如上咯 - 当在使用 portal 时, 记住管理键盘焦点就变得尤为重要。
Portal 进行事件冒泡，并不会随着传送们而改变，而是在挂载Portal组件的地方来管理事件
可以通过这个栗子来看