React Portals

React 16 был выпущен в сентябре 2017 года, в котором были представлены порталы.

Порталы - это способ визуализации элемента в узле DOM, который существует вне иерархии DOM родительского компонента.

Когда запускается портал, то все события управляются иерархией компонентов React, а не иерархией, заданной положением DOM элемента.

Отсюда и название «портал»: элемент находится где-то в DOM дереве, которое находится за пределами обычного дерева компонентов React, но React всё еще контролирует этот элемент.

React предлагает простой ReactDOM.createPortal() API, который принимает 2 аргумента. Первый - это элемент который нужно отобразить, а второй - это элемент (контейнер), где его нужно отобразить.

Классический вариант использования этого - модальные окна.

Например:

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement("div");
  }

  componentDidMount() {
    document.getElementById("modal-root").appendChild(this.el);
  }

  componentWillUnmount() {
    document.getElementById("modal-root").removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

Мы можем сделать так, чтобы компонент App отображал его и все события, происходящие в этом модальном компоненте, будут обрабатываться так же компонентом App, даже если технически окно отображается в другом DOM дереве:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showModal: false };

    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);
  }

  handleShow() {
    this.setState({ showModal: true });
  }

  handleHide() {
    this.setState({ showModal: false });
  }

  render() {
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          The modal
          <button onClick={this.handleHide}>Hide</button>
        </div>
      </Modal>
    ) : null;

    return (
      <div className="app">
        The app.
        <button onClick={this.handleShow}>Show modal</button>
        {modal}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Пример:

Заключение

Надеюсь, данная статья дала тебе базовое понимание порталов: каковы они, что они делают и как их использовать в приложении React. Эта концепция может показаться тривиальной, но способность перемещать элементы за пределы иерархии DOM является удобным способом сделать компоненты немного более расширяемыми и многократно используемыми.