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

Понимание API createPortal

createPortal — это встроенная функция React, которая позволяет отображать компоненты в разных частях DOM. И это особенно полезно для создания модальных окон и наложений, сторонних компонентов и пользовательских элементов пользовательского интерфейса.

Как это работает

Портал используется внутри оператора возврата компонента и меняет только физическое размещение узла DOM. это похоже на телепортацию узла DOM за пределы основного дерева DOM. API createPortal имеет доступ к двум параметрам и третьему необязательному:

• Дети: все, что можно отобразить с помощью React, элемент div, компонент или фрагмент React.
• domNode: местоположение дочерних элементов, которые нужно разместить.
• ключ (необязательно): уникальный номер или строка, которая будет использоваться в качестве ключа портала.

Если мы предположим, что мы создаем портал в компоненте A и визуализируем его в компоненте B, дочерние элементы портала будут получать доступ ко всему состоянию и переменным компонента A и функционировать так же, как в компоненте A, пока он визуализируется в компоненте. Б.

Создание и использование портала

В примере ниже портал используется для телепортации компонента Child, который принимает состояние, и перемещения этого компонента в тело.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

Теперь дочерний компонент будет отображаться в тегах тела HTML.

Заключение

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