“React Portal Ejemplo” Código de respuesta

Crear 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 Ejemplo

React Protal
Uptight Unicorn

Casos de uso más comunes de portales en 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

Respuestas similares a “React Portal Ejemplo”

Preguntas similares a “React Portal Ejemplo”

Más respuestas relacionadas con “React Portal Ejemplo” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código