Порталы в React.js

Наверное, каждому фронтенд-разработчику доводилось делать разного рода выпадайки или всплывающие подсказки. И почти всегда настает момент, когда такую штуку надо отобразить внутри элемента с overflow: hidden. Настал такой момент и в SmartProgress.

Мы на SmartProgress ^[1] используем React для разработки интерфейсов и нам очень хотелось найти react-way решение. На помощь нам спешат порталы.

Портал — компонент, который рендерит свое содержимое в другую часть DOM, например в конец <body>. Такое поведение позволяет отображать элементы за пределами блоков с, например, overflow: hidden, но при этом минимально менять дерево компонентов.

Обычно порталы используют для модальных окон (что тоже весьма удобно), но мы немного модифицируем идею и приспособим её для наших нужд. Нам нужно поведение похожее на блок с position: absolute и margin-top/margin-left. Назовем этот компонент RelativePortal.

Удобно определять интерфейс компонента и только потом описывать его реализацию.
Например, мы имеем такой код:

<div className="calendarLink">
  <a className="calendarLink__trigger">Выбрать дату</a>
  {isOpen && <CalendarDropdown />}
</div>

При использовании портала, код изменится на такой:

<div className="calendarLink">
  <a className="calendarLink__trigger">Выбрать дату</a>
  <RelativePortal left="0" top="0">
    {isOpen && <CalendarDropdown />}
  </RelativePortal>
</div>

Теперь можно приступить к делу. Каждый шаг я буду иллюстрировать примером на jsfiddle. Вот начальное состояние, при котором видно проблему — https://jsfiddle.net/Sunify/1k18wxm1/1/ ^[2].

Как сделать портал (осторожно — ES6!)

Метод render у портала возвращает null, так мы ничего не рендерим в месте вызова компонента. Вместо этого мы будем использовать ReactDOM.render в одном из lifecycle-методов компонента, например в componentDidUpdate.

class RelativePortal extends React.Component {
  ...

  // Возвращаем null чтобы ничего не рендерить на месте вызова компонента
  render() {
    return null;
  }

  // А тут мы рендерим в наш портал
  componentDidUpdate() {
    ReactDOM.render(
      <div {...this.props}>{this.props.children}</div>,
      this.node
    );
  }

  ...
}

Полдела сделано, но сейчас наша выпадайка отображается внизу страницы (https://jsfiddle.net/Sunify/kr8hehca/ ^[3]) — надо это исправить!

class RelativePortal extends React.Component {
  ...
  // Рендерим инлайновый элемент, чтобы React.findDOMNode(this) не возвращал null
  render() {
    return <span />;
  }

  // Добавляем обработчик на событие ресайза для обновления координат
  componentDidMount() {
    this.handleResize = () => {
      const rect = React.findDOMNode(this).getBoundingClientRect();
      const left = window.scrollX + rect.left;
      const top = window.scrollY + rect.top;

      if(top !== this.state.top || left !== this.state.left) {
        this.setState({ left, top });
      }
    };
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
  }

  // А тут мы рендерим в портал и позиционируем наш элемент по правильным координатам
  componentDidUpdate() {
    ReactDOM.render(
      <div
        {...this.props}
        style={{
          position: 'absolute',
          top: this.state.top + this.props.top,
          left: this.state.left + this.props.left
        }}
      >
        {this.props.children}
      </div>,
      this.node
    );
  }
  ...
}

Теперь выпадайка отображается где нам и нужно было и у нас есть универсальный компонент для такого рода задач.
https://jsfiddle.net/Sunify/4fmdugrr/ ^[4]

У такого метода есть очевидные достоинства: он работает, у него минимальный интерфейс и он универсален — мы можем завернуть в RelativePortal что угодно.

Но у него есть и существенный недостаток — мы теряем каскад css. У нас не наследуются шрифты, цвета и т.д. Не работает :hover — состояние наведения приходится хранить в состоянии компонента. Например, так — https://jsfiddle.net/Sunify/nz7wyee3 ^[5]. Для нас это не критично, поэтому такое решение нас устраивает.

Мы активно используем такой компонент и разместили его в npm. Пользуйтесь ^[6]!

Автор: SmartProgress

Источник ^[7]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/159741

Ссылки в тексте:

[1] SmartProgress: https://smartprogress.do/

[2] https://jsfiddle.net/Sunify/1k18wxm1/1/: https://jsfiddle.net/Sunify/1k18wxm1/1/

[3] https://jsfiddle.net/Sunify/kr8hehca/: https://jsfiddle.net/Sunify/kr8hehca/

[4] https://jsfiddle.net/Sunify/4fmdugrr/: https://jsfiddle.net/Sunify/4fmdugrr/

[5] https://jsfiddle.net/Sunify/nz7wyee3: https://jsfiddle.net/Sunify/nz7wyee3

[6] Пользуйтесь: https://www.npmjs.com/package/react-relative-portal

[7] Источник: https://habrahabr.ru/post/306096/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Нажмите здесь для печати.