“Przykład portalu React” Kod odpowiedzi

Utwórz 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

Przykład portalu React

React Protal
Uptight Unicorn

Najczęstsze przypadki użycia portali w 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

Odpowiedzi podobne do “Przykład portalu React”

Pytania podobne do “Przykład portalu React”

Więcej pokrewnych odpowiedzi na “Przykład portalu React” w JavaScript

Przeglądaj popularne odpowiedzi na kod według języka

Przeglądaj inne języki kodu