“React Portal Пример” Ответ

Создать портал React

// modal file s an example

import React from 'react';
import ReactDOM from 'react-dom';

// create modal and use a portal to mount it in a specific DOM point
const Modal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <div>This is the modal</div>,
        document.getElementById('modal-root'),
      )}
    </React.Fragment>
  )
}


export default Modal;

// public html doc to define where the is the portal's destination
// in this case "modal-root"

<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>
Thankful Turtle

React Portal Пример

React Protal
Uptight Unicorn

Наиболее распространенные варианты использования порталов в React

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips. Note: When working with portals, remember that managing keyboard focus becomes very important.
Poor Pygmy

Ответы похожие на “React Portal Пример”

Вопросы похожие на “React Portal Пример”

Больше похожих ответов на “React Portal Пример” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования