Holen Sie sich die Fensterbreite in React

Dieser Artikel zeigt, wie man den Fensterbreitenwert in React findet.

Responsiveness ist eine der Grundlagen der modernen Webentwicklung. Heutzutage durchsuchen Menschen Websites von vielen verschiedenen Geräten aus: Laptops, Desktops, Mobiltelefone und sogar Spielkonsolen.

Reaktionsfähigkeit bedeutet, auf die Bedürfnisse des Benutzers einzugehen und das Layout Ihrer Anwendung basierend auf dem Gerät des Benutzers anzupassen.

Holen Sie sich die Fensterbreite in React

Das wichtigste Merkmal eines jeden Geräts ist seine Bildschirmgröße. In der React-Anwendung können wir einfach auf die Zahl zugreifen, die die Bildschirmgröße in Pixel darstellt.

Dann können wir diese Informationen verwenden, um das Aussehen und die Funktionalität unserer React-App zu ändern. Sie könnten die Bildschirmgröße (in Pixel) verwenden, um Klassen bedingt anzuwenden.

Wenn die Fensterbreite beispielsweise weniger als 600 Pixel beträgt, haben Sie eine Auffüllung von 10 Pixel, und wenn sie über 600 Pixel beträgt, haben Sie eine Auffüllung von 20 Pixel. Kurz gesagt, Sie könnten die Bildschirmbreite verwenden, um zu überprüfen, wie gut der Inhalt auf Ihre Seite passt.

Wir können den Fensterbreitenwert im Komponentenzustand speichern. Wenn sich die Fensterbreite während der Laufzeit ändert, können Sie Ihre React-Anwendung so einrichten, dass sie den Zustandswert auf die aktualisierte Breite setzt.

Holen Sie sich die Fensterbreite in React-Klassenkomponenten

In Klassenkomponenten müssen wir die Methode .addEventListener() verwenden, um auf das resize-Ereignis des window-Objekts selbst zu lauschen. Jedes Mal, wenn der Benutzer die Breite des Fensters ändert, wird der Ereignishandler ausgeführt und aktualisiert den Wert der Fensterbreite.

Code:

constructor(props) {
    super(props);
    this.state = { windowWidth: 0, windowHeight: 0 };
    this.handleResize = this.handleResize.bind(this);
}

componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
}

handleResize() {
    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
}

Zuerst beginnen wir damit, den Zustand zu initiieren und die Eigenschaften windowWidth und windowHeight auf einen Standardwert von 0 zu setzen. Wir binden auch die Methode handleResize.

In der Lifecycle-Methode componentDidMount() rufen wir zum ersten Mal die Methode handleResize() auf. Dadurch werden die anfänglichen Abmessungen unserer Seite und ein Handler für das Ereignis resize festgelegt.

In der Lifecycle-Methode componentWillUnmount entfernen wir den Event-Listener.

Schließlich verwenden wir die Eigenschaft innerWidth des Fensterobjekts, um auf die Breite eines Fensters zuzugreifen. Wir verwenden die Eigenschaft innerHeight, um die Höhe zu erfassen.

Wir verwenden die Methode setState(), um den Zustand der Klassenkomponente zu aktualisieren und Zustandseigenschaften auf diese Dimensionen festzulegen.

Holen Sie sich die Fensterbreite in React-Funktionskomponenten

In Funktionskomponenten können Sie einen benutzerdefinierten useWindowDimensions-Hook erstellen und ihn dann verwenden, um die Breiten- und Höhenwerte des Fensters einfach abzurufen.

Schauen wir uns die Definition des Hooks useWindowDimensions an.

Code:

import { useState, useEffect } from 'react';

function getWindowDimensions() {
    const width = window.innerWidth
    const height = window.innerHeight
    return {
        width,
        height
    };
}

export default function useWindowDimensions() {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

Dann verwenden wir den Hook useEffect, der aus der React-Kernbibliothek importiert wurde, um die gleichen Aufgaben wie in Lebenszykluskomponenten auszuführen: Fügen Sie einen Ereignis-Listener hinzu und führen Sie ihn einmal aus, um die anfänglichen Fensterabmessungen zu erhalten, wenn die Komponente bereitgestellt wird, und entfernen Sie den Ereignis-Listener, wenn es wird abgebaut.

Einmal eingerichtet, können Sie den useWindowDimensions-Hook in andere Komponenten importieren und ihn verwenden, um die Breite und Höhe eines Fensters einfach zu erhalten.

Code:

const App = () => {
    const { height, width } = useWindowDimensions();
    return (
        <div>
            The width of your window: {width}
            The height of your window: {height}
        </div>
    );
}