Fragment 和 Portals

Tue, 17 Dec 2024 00:00:00 +0800

一、Portals

某些情况下，我们希望渲染的内容独立于父组件，甚至独立于当前挂在的DOM元素（默认都是挂载到id为root的DOM元素上的）

Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案：

ReactDOM.createPortal(child, container)

第一个参数：是任何可渲染的React子元素，例如一个元素、字符串或fragment 第二个参数：是一个DOM元素

通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：

render() {
 // React 挂载了一个新的 div，并且把子元素渲染其中
 return (
 <div>
 {this.props.children}
 </div>
 );
}

然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：

render() {
 // React 并没有创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
 // `domNode` 是一个可以在任何位置的有效 DOM 节点。
 return ReactDOM.createPortal(
 this.props.children,
 domNode
 );
}

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

案例

比如将h2挂在到id为zs的节点下

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <div id="zs"></div>
 </body>
</html>

App.jsx

Fragment 和 Portals on Last Stand

Fragment 和 Portals

一、Portals

案例