Verwenden Sie ReactDOM.createPortal() in React

1. Erstellen Sie eine Nummer generierende App mit ReactDOM.createPortal() in React
2. Erstellen Sie einen CSS-Overlay-Effekt mit ReactDOM.createPortal() in React
3. Abschluss

Bei React geht es darum, die besten Möglichkeiten zum Schreiben sauberer, leicht verständlicher Codes zu finden. Die Funktion createPortal() in React ist eine solche Möglichkeit.

Die Funktion ReactDOM.createPortal() ist eine bequeme Möglichkeit, lange Codezeilen in Abschnitte aufzuteilen. Wenn wir die untergeordnete Komponente von der übergeordneten Komponente trennen, um jede Komponente kurz zu machen, verbindet die Funktion createPortal() beide Komponenten, ohne an Effektivität zu verlieren.

Auch wenn wir die Inhalte in der untergeordneten Komponente vor der übergeordneten Komponente rendern möchten, kann das ReactDOM.createPortal() verwendet werden. Sehen wir uns jedoch an, wie wir diese Funktion nutzen können, indem wir einfache Apps erstellen.

Erstellen Sie eine Nummer generierende App mit ReactDOM.createPortal() in React

In diesem Beispiel werden wir sehen, wie wir den Zustand der übergeordneten Komponente von der untergeordneten Komponente aus steuern können, während sich die untergeordnete Komponente nicht direkt innerhalb des div mit dem Event-Handler onClick befindet.

Wir erstellen einen neuen Projektordner, navigieren zum öffentlichen Ordner, greifen auf die Datei index.html zu und erstellen divs, die als DOM dienen, durch das die untergeordnete Komponente gerendert wird. Die index.html sieht also so aus:

Code-Snippet – indx.html:

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

Dann gehen wir in die Datei index.js, um die eigentliche Codierung vorzunehmen. Hier importieren wir die Funktion createPortal() aus react-dom.

Code-Snippet – 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);

Ausgang:

Die Schaltfläche Klicken befindet sich nicht innerhalb der Komponente, die die auszuführende Aktion definiert, wenn auf die Schaltfläche geklickt wird, aber wir können sehen, dass die Schaltfläche die übergeordnete Komponente aktualisiert.

Erstellen Sie einen CSS-Overlay-Effekt mit ReactDOM.createPortal() in React

Mit der Funktion createPortal() können wir Styling-Komponenten in der .js-Datei erstellen, die die Webseite abdecken, sobald auf die Schaltfläche geklickt wird, selbst wenn sich das Styling nicht in der Funktionskomponente befindet, die die Aktionen der Schaltfläche definiert .

Wir erstellen eine neue Datei im Ordner src und nennen sie overlayStyles.js. Diese enthält die Overlay-CSS-Stile, die über die Webseite gerendert werden, wenn auf die Schaltfläche geklickt wird.

Dann navigieren wir zur Datei index.js und geben diese Codes ein:

Code-Snippet – 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"));

Dann fügen wir in der Datei overlayStyles.js die CSS-Codes wie folgt hinzu:

Code-Snippet – 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"
};

Ausgang:

Wenn wir auf die Schaltfläche Overlay öffnen klicken, sehen wir, dass die Stile aktiviert werden, auch wenn sie sich nicht in der Komponente befinden, die die onClick-Ereignisse verarbeitet.

Abschluss

Die Funktion ReactDOM.createPortal() macht es Programmierern leicht, eine Komponente zu trennen, die für eine bestimmte Funktion innerhalb einer Anwendung verwendet werden soll, z. B. wenn wir möchten, dass ein Element in der Vorschau angezeigt wird, wenn wir den Mauszeiger darüber bewegen.