Usa ReactDOM.createPortal() en React

1. Cree una aplicación de generación de números usando ReactDOM.createPortal() en React
2. Cree un efecto de superposición de CSS usando ReactDOM.createPortal() en React
3. Conclusión

React se trata de idear las mejores formas de escribir códigos limpios y fáciles de entender. La función createPortal() en React es una de esas formas.

La función ReactDOM.createPortal() es una forma conveniente de dividir largas líneas de códigos en secciones. Cuando separamos el componente hijo del componente padre para que cada componente sea breve, la función createPortal() conecta ambos componentes sin perder efectividad.

Además, si queremos representar los contenidos en el componente secundario antes que el componente principal, se puede usar ReactDOM.createPortal(). Dicho esto, echemos un vistazo a las formas en que podemos poner en uso esta función mediante la creación de aplicaciones simples.

Cree una aplicación de generación de números usando ReactDOM.createPortal() en React

En este ejemplo, veremos cómo podemos controlar el estado del componente principal desde el componente secundario, mientras que el componente secundario no está directamente dentro del div con el controlador de eventos onClick.

Crearemos una nueva carpeta de proyecto, navegaremos a la carpeta pública, accederemos al archivo index.html y crearemos divs, que servirán como el DOM a través del cual se representará el componente secundario. Entonces el index.html se verá así:

Fragmento de código- indx.html:

<div id="app-container"></div>
<div id="modal-container"></div>

Luego nos dirigimos al archivo index.js para hacer la codificación real. Aquí, importaremos la función createPortal() desde react-dom.

Fragmento de código- index.js:

import React from 'react';
import ReactDOM, { render, createPortal } from 'react-dom';

const appContainer = document.getElementById('app-container');
const modalContainer = document.getElementById('modal-container');

class Parent extends React.Component {
  state = {clicks: 0};
  onClick = () => {

    this.setState(state => ({clicks: state.clicks + 1}));
  };
  render() {
    return (
      <div onClick={this.onClick}>
        <p>Number of clicks: {this.state.clicks}</p>

        {ReactDOM.createPortal(<Child />, modalContainer)}
      </div>
    );
  }
}

function Child() {
  return <button>Click</button>;
}
ReactDOM.render(<Parent />, appContainer);

Producción:

El botón Hacer clic no está dentro del componente que define la acción a realizar cuando se hace clic en el botón, pero podemos ver el botón actualizando el componente padre.

Cree un efecto de superposición de CSS usando ReactDOM.createPortal() en React

Con la función createPortal(), podemos crear componentes de estilo en el archivo .js que cubrirán la página web una vez que se haga clic en el botón, incluso cuando el estilo no esté dentro del componente de función que define las acciones del botón. .

Crearemos un nuevo archivo dentro de la carpeta src y lo llamaremos overlayStyles.js. Esto contendrá los estilos CSS superpuestos representados en la página web cuando se haga clic en el botón.

Luego navegamos al archivo index.js e ingresamos estos códigos:

Fragmento de código- index.js:

import React from "react";
import ReactDOM, { render } from "react-dom";
import { overlay, overlayContent } from "./overlayStyles";

class Overlay extends React.Component {
  constructor(props) {
    super(props);
    this.overlayContainer = document.createElement("div");
    document.body.appendChild(this.overlayContainer);
  }

  componentWillUnmount() {
    document.body.removeChild(this.overlayContainer);
  }

  render() {
    return ReactDOM.createPortal(
      <div style={overlay}>
        <div style={overlayContent}>{this.props.children}</div>
      </div>,
      this.overlayContainer
    );
  }
}

class App extends React.Component {
  state = {
    showOverlay: false
  };

  toggleOverlay = () => {
    this.setState(prevState => {
      return { showOverlay: !prevState.showOverlay };
    });
  };

  render() {
    return (
      <div>
        <h1>Dashboard</h1>
        {this.state.showOverlay && (
          <Overlay>
            <div>
              Overlay Content{" "}
              <button onClick={this.toggleOverlay}>Close</button>
            </div>
          </Overlay>
        )}
        <button onClick={this.toggleOverlay}>Open Overlay</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Luego, en el archivo overlayStyles.js, agregamos los códigos CSS así:

Fragmento de código- overlayStyles.js:

export const overlay = {
  height: "100%",
  width: "100%",
  position: "fixed",
  StayInPlaceZIndex: "1",
  SitOnTopLeft: "0",
  top: "0",
  backgroundColor: "rgb(0,0,0)",
  BlackFallbackColorBackgroundColor: "rgba(0,0,0, 0.9)",
  BlackWOpacityOverflowX: "hidden",
  DisableHorizontalScrollTransition: "0.5s"
};

export const overlayContent = {
  position: "relative",
  top: "25%",
  width: "100%",
  textAlign: "center",
  marginTop: "30px",
  color: "white"
};

Producción:

Cuando hacemos clic en el botón Open Overlay, vemos que activa los estilos incluso cuando no están dentro del componente que maneja los eventos onClick.

Conclusión

La función ReactDOM.createPortal() facilita a los codificadores separar un componente para usarlo en una función específica dentro de una aplicación, como cuando queremos que se obtenga una vista previa de un elemento cuando pasamos el mouse sobre él.