React 基础巩固(二十六)——Portals 的使用
Portals
-
通常,组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。
-
添加 id 为 more、modal 的
div
元素
<div id="root"></div>
<div id="more"></div>
<div id="modal"></div>
- 构建 Modal.jsx, 通过
createPortal
把组件渲染到指定的modal
节点下
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";export class Modal extends PureComponent {render() {return createPortal(this.props.children, document.querySelector("#modal"));}
}export default Modal;
- 构建 App.jsx
import React, { PureComponent } from "react";
import { createPortal } from "react-dom";
import Modal from "./Modal";export class App extends PureComponent {render() {return (<div><h1>App</h1>{/* 直接渲染到more */}{createPortal(<h2>test protal</h2>, document.querySelector("#more"))}{/* 封装成Modal */}<Modal><h2>test modal content</h2></Modal></div>);}
}export default App;
- 查看渲染结果