Portals使用
作者:
张_何 | 来源:发表于
2022-05-14 16:17 被阅读0次
- 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元 素上的）。
- Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：
- 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
- 第二个参数（container）是一个 DOM 元素；
ReactDom.createProtal(child, container);
- 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：
- 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：比如我们可以用这个特性开发一个 modal 组件
<div id = "root"> </div>
<!-- 新添 modal 节点 -->
<div id = "modal"> </div>
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: red;
}
本文标题：Portals使用
本文链接：https://www.haomeiwen.com/subject/bxqmurtx.html
网友评论