Alexey Vechkanov
Nov 23, 2017 · 3 min read

React 16 уже доступен, и одним из наиболее интересных нововведений являются «Порталы».

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

Но это не очень интересно. Давайте сделаем кое что странное…

Поскольку портал, просто берет элемент и добавляет его в какой-то другой элемент, вы можете не ограничиваться вставкой в текущем документе. Вы можете добавить его в тело совершенно другого документа, возможно, в документ в совершенно другом окне.

Ниже у меня есть базовая страница (слева), у которой есть счетчик с кнопкой, а также окно (справа), входящее в одно и то же приложение React.

Тот факт, что окно справа – это одно и то же приложение React, – это то, что должно вас сейчас волновать.

Вы можете поверить на слово, что цифры растут синхронно, или откройте пример

Все, что вы видите на картинке выше, находится в одном компоненте.

Вы наверняка уже рассмотрели, что <MyWindowPortal> немного особенный, и все, что находится внутри него, будет отображаться в другом окне.

Вы правы, и я горжусь вами. В частности, <MyWindowPortal> выполняет две функции:

  1. Открывает новое окно браузера, когда оно монтируется
  2. Создает «портал» и добавляет реквизиты в тело нового окна.

Разве это не самая крутая вещь?

Я так взволнован, что мне нужно прогуляться.


Я видел утку!


Ниже расположено тело компонента показанного выше. Часть, которая является новой в React 16, представляет собой ReactDOM.createPortal на строке 11 — вот где происходит волшебство.

Приношу извинения за то, что методы жизненного цикла в странном поряд

Имеет ли это смысл? Компонент ничего не возвращает, но он делает что-то в другом месте.

Может быть, еще один способ подумать об этом: обычно родительский компонент говорит дочернему компоненту: «эй, отрисуй такой-то DOM, а потом верни мне результаты», идочерний компонент делает то, что ему говорят. Но в нашем случае дочерний элемент говорит: «Нет! Я собираюсь показать материал в другом окне и написать сообщение в блоге об этом! “


Теперь я знаю, о чем вы думаете.

У вас пересохло в горле от волнения и хотите пить. Да, пойдите, уталите жажду.

Другая вещь, о которой вы, вероятно, думаете, такова: что хорошего в том, что она может вставлять какой-то DOM в пустое окно, если оно не стилизовано? Может быть, если это может себе позволить Wikipedia, никто и не заметит, но ваш сайт лучший, вы не можете позволить открыть окно чата без стилей.

Ну, хорошие новости, все возможно!

Сначала я надеялся, что будет простой способ скопировать стили в новое окно. Затем я вспомнил, что моя жизнь — это не что иное, как серия бессмысленных заданий, чтобы заполнить минуты и часы, их единственная цель — отвлечь меня от глубокой, воющей пустоты внутри.

Так что написать функцию было весело!

Вот она:

Весь этот styleSheet выглядит не очень красиво, поэтому я с нетерпением жду, когда со мной поделятся умным способом сделать это.

Теперь я могу скопировать стили сразу после открытия нового окна:

Вот готовый пример на codepen:

Я не думаю, что это будет работать из приложения Medium на iOS / Android, поэтому нажмите значок codepen в правом верхнем углу, чтобы открыть его в браузере.


Я думаю, что это конец поста.

Всем пока!

Front Stories

Thoughts on the theme of front-end development

Alexey Vechkanov

Written by

Front-end developer

Front Stories

Thoughts on the theme of front-end development

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade