简介

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.

尽管 portal 可以被放置在 DOM 树的任何地方，但在其他方面其行为和普通的 React 子节点行为一致。无论其子节点是否是 portal，上下文特性依然能够如之前一样正确地工作。由于 portal 仍存在于 React 树中，而不用考虑其在 DOM 树中的位置。

场景

在编写组件的时候，有时需要一些对话框，但添加对话框的时候，需要将组件放到最外层，那样做的场景中需要将更改状态的方法传入到组件，在组件中控制最外层的渲染。这样就会导致整个组件的更新。

portals可以很好的解决此问题。而不必使用管理状态的工具，或者其他的操作。

  1. ReactDOM.createPortal(child, container)

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

使用方法

通常，编写的组件会返回一个element、fragment，这个组件会挂载在父级的组件。

  1. render() {
  2.   // React mounts a new div and renders the children into it
  3.   return (
  4.     <div>
  5.       {this.props.children}
  6.     </div>
  7.   );
  8. }

但，例如这个例子，我们想将组件挂载到指定的地方？

  1. render() {
  2.   // React does *not* create a new div. It renders the children into `domNode`.
  3.   // `domNode` is any valid DOM node, regardless of its location in the DOM.
  4.   return ReactDOM.createPortal(
  5.     this.props.children,
  6.     domNode
  7.   );
  8. }

例如

  1. <div id="app-root"></div>
  2. <div id="modal-root"></div>
  1. // These two containers are siblings in the DOM
  2. const appRoot = document.getElementById('app-root');
  3. const modalRoot = document.getElementById('modal-root');
  5. // Let's create a Modal component that is an abstraction around
  6. // the portal API.
  7. class Modal extends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     // Create a div that we'll render the modal into. Because each
  11.     // Modal component has its own element, we can render multiple
  12.     // modal components into the modal container.
  13.     this.el = document.createElement('div');
  14.   }
  16.   componentDidMount() {
  17.     // Append the element into the DOM on mount. We'll render
  18.     // into the modal container element (see the HTML tab).
  19.     modalRoot.appendChild(this.el);
  20.   }
  22.   componentWillUnmount() {
  23.     // Remove the element from the DOM when we unmount
  24.     modalRoot.removeChild(this.el);
  25.   }
  27.   render() {
  28.     // Use a portal to render the children into the element
  29.     return ReactDOM.createPortal(
  30.       // Any valid React child: JSX, strings, arrays, etc.
  31.       this.props.children,
  32.       // A DOM element
  33.       this.el,
  34.     );
  35.   }
  36. }
  38. // The Modal component is a normal React component, so we can
  39. // render it wherever we like without needing to know that it's
  40. // implemented with portals.
  41. class App extends React.Component {
  42.   constructor(props) {
  43.     super(props);
  44.     this.state = {showModal: false};
  46.     this.handleShow = this.handleShow.bind(this);
  47.     this.handleHide = this.handleHide.bind(this);
  48.   }
  50.   handleShow() {
  51.     this.setState({showModal: true});
  52.   }
  54.   handleHide() {
  55.     this.setState({showModal: false});
  56.   }
  58.   render() {
  59.     // Show a Modal on click.
  60.     // (In a real app, don't forget to use ARIA attributes
  61.     // for accessibility!)
  62.     const modal = this.state.showModal ? (
  63.       <Modal>
  64.         <div className="modal">
  65.           <div>
  66.             With a portal, we can render content into a different
  67.             part of the DOM, as if it were any other React child.
  68.           </div>
  69.           This is being rendered inside the #modal-container div.
  70.           <button onClick={this.handleHide}>Hide modal</button>
  71.         </div>
  72.       </Modal>
  73.     ) : null;
  75.     return (
  76.       <div className="app">
  77.         This div has overflow: hidden.
  78.         <button onClick={this.handleShow}>Show modal</button>
  79.         {modal}
  80.       </div>
  81.     );
  82.   }
  83. }
  84. ReactDOM.render(<App />, appRoot);

事件捕获的例子

An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.

  1. <div id="app-root"></div>
  2. <div id="modal-root"></div>
  1. // These two containers are siblings in the DOM
  2. const appRoot = document.getElementById('app-root');
  3. const modalRoot = document.getElementById('modal-root');
  5. class Modal extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.el = document.createElement('div');
  9.   }
  11.   componentDidMount() {
  12.     // The portal element is inserted in the DOM tree after
  13.     // the Modal's children are mounted, meaning that children
  14.     // will be mounted on a detached DOM node. If a child
  15.     // component requires to be attached to the DOM tree
  16.     // immediately when mounted, for example to measure a
  17.     // DOM node, or uses 'autoFocus' in a descendant, add
  18.     // state to Modal and only render the children when Modal
  19.     // is inserted in the DOM tree.
  20.     modalRoot.appendChild(this.el);
  21.   }
  23.   componentWillUnmount() {
  24.     modalRoot.removeChild(this.el);
  25.   }
  27.   render() {
  28.     return ReactDOM.createPortal(
  29.       this.props.children,
  30.       this.el,
  31.     );
  32.   }
  33. }
  35. class Parent extends React.Component {
  36.   constructor(props) {
  37.     super(props);
  38.     this.state = {clicks: 0};
  39.     this.handleClick = this.handleClick.bind(this);
  40.   }
  42.   handleClick() {
  43.     // This will fire when the button in Child is clicked,
  44.     // updating Parent's state, even though button
  45.     // is not direct descendant in the DOM.
  46.     this.setState(state => ({
  47.       clicks: state.clicks + 1
  48.     }));
  49.   }
  51.   render() {
  52.     return (
  53.       <div onClick={this.handleClick}>
  54.         <p>Number of clicks: {this.state.clicks}</p>
  55.         <p>
  56.           Open up the browser DevTools
  57.           to observe that the button
  58.           is not a child of the div
  59.           with the onClick handler.
  60.         </p>
  61.         <Modal>
  62.           <Child />
  63.         </Modal>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. function Child() {
  70.   // The click event on this button will bubble up to parent,
  71.   // because there is no 'onClick' attribute defined
  72.   return (
  73.     <div className="modal">
  74.       <button>Click</button>
  75.     </div>
  76.   );
  77. }
  79. ReactDOM.render(<Parent />, appRoot);

Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a component, the parent can capture its events regardless of whether it’s implemented using portals.
在父组件里捕获一个来自 portal 的事件冒泡能够在开发时具有不完全依赖于 portal 的更为灵活的抽象。例如，若你在渲染一个 组件，父组件能够捕获其事件而无论其是否采用 portal 实现。

参考