[Serie React Advanced] Estudio de caso de React Portal
Recientemente leí la documentación/tutoriales/materiales y encontré algo que no había encontrado antes: Portal. Con el espíritu de aprender, abrí el documento y descubrí que la existencia de Portal realmente resolvió algunos de los problemas encontrados anteriormente.
Que es portal
Portal es una nueva característica introducida por ReactDOM en v16, y ha sido una característica durante 5 años hasta ahora. Sus ventajas son las siguientes:
- Los nodos React se pueden montar fuera del árbol DOM virtual
- Aunque la dirección física del nodo React adjunto está fuera del árbol DOM virtual, su componente principal puede escuchar el evento burbujeante del componente.
- El contexto de reacción puede permanecer intacto
Uso del portal
La documentación oficial brinda ejemplos de los escenarios de aplicación de Portal, que incluyen: diálogos (cuadros de diálogo), tarjetas flotantes (tarjetas flotantes) e información sobre herramientas (herramientas de solicitud).
El siguiente es un caso simple de Modal.
import "./styles.css";
const Modal = () => {
return <div className="modal">Modal</div>;
};
export default function App() {
return (
<div className="App">
<div className="modal__wrapper">
<Modal />
</div>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<h3>What happen here</h3>
<h4>something happen here</h4>
</div>
);
}
El resultado de la representación es el siguiente:
Básicamente cubre mis necesidades.
Sin embargo, en ocasiones la lógica de negocio necesita realizar un renderizado condicional en el componente, en este momento puede haber problemas con el posicionamiento de Modal, como por ejemplo:
así como
Es cierto que crear un nuevo fondo, posicionar la altura y el ancho de 100vh, hacer que su color de fondo sea transparente, establecer la posición en relativo y continuar usando CSS para controlar la posición del Modal también puede resolver el problema violentamente (avergonzado. .. esto es lo que solía hacer antes). soluciones alternativas para un progreso rápido). Sin embargo, esta cruda solución también tiene ciertos problemas:
-
El usuario no puede interactuar con elementos en segundo plano hasta que se cierre el Modal actual
-
La estructura semántica también es incorrecta.
En este momento, el uso del Portal puede resolver este problema, como por ejemplo:
Haz un cambio de posición en el div:
La representación sigue siendo exactamente la misma.
Esto se debe a que el elemento en el que está montado Portal está en el nodo cuya identificación de elemento es modal, y la posición de modal es:
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="modal"></div>
<div id="root"></div>
</body>
El análisis de los resultados HTML renderizados también encontrará que el componente Modal está montado en el #modalnodo :
evento burbujeante
Ahora actualice un poco el código:
import "./styles.css";
import ReactDOM from "react-dom";
const Modal = ({
clickHandler }) => {
return (
<div className="modal">
<button onClick={
clickHandler}>btn</button>
</div>
);
};
export default function App() {
const clickHandler = () => {
console.log("hello world");
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<h3>What happen here</h3>
<h4>something happen here</h4>
<div className="modal__wrapper">
{
ReactDOM.createPortal(
<Modal clickHandler={
clickHandler} />,
document.querySelector("#modal")
)}
</div>
</div>
);
}
También simula algunas situaciones que se encuentran a menudo cuando se usa Modal, es decir, el manejo de eventos. En el caso de Portal, Appeste componente principal puede pasar controladores de eventos a Modal:
En el mismo caso, los detectores de eventos como onChange también se pueden activar para modificar el estado en el componente principal o reutilizar el controlador de eventos en el componente principal.
Uso del contexto
De hecho, estoy agregando esto debido a esta respuesta de desbordamiento de pila: ¿Cómo usar ReactDOM.createPortal() en React 16? , donde la respuesta con la puntuación más alta decía:
Lo estoy enfatizando porque bibliotecas muy populares como react-router, redux usa mucho el contexto de reacción. Entonces, la disponibilidad de contexto cuando se usa
Portales muy útil.
Las bibliotecas de terceros, como react-router y redux, son fuertes dependencias de React Context, por lo que si desea disfrutar al máximo de las funciones de estas bibliotecas, también debe conservar el contenido de React Context.