Stellen Sie Medienabfragen in React ohne CSS ein

1. Medienanfragen in React
2. Erstellen Sie Klassenkomponenten, um Medienabfragen in React ohne CSS festzulegen
3. Erstellen Sie funktionale Komponenten, um Medienabfragen in React ohne CSS festzulegen

Im Jahr 2022 sind Benutzer, die im Internet surfen, viel weniger vorhersehbar als noch vor 20 oder sogar 10 Jahren. Heutzutage surfen die meisten Menschen mit ihren Smartphones im Internet und erwarten eine viel bessere Benutzererfahrung als früher.

Kunden werden auch mit Optionen überschwemmt, sodass Unternehmen sich mehr Mühe geben müssen, die bestmöglichen Websites zu entwerfen, um ihre Aufmerksamkeit zu erregen.

Medienanfragen in React

Da Benutzer Websites von Geräten mit unterschiedlichen Bildschirmgrößen besuchen, müssen Webentwickler einen Weg finden, das Website-Design entsprechend anzupassen. Die Verwendung von Medienabfragen ist die wichtigste Methode, um die Reaktionsfähigkeit Ihrer Anwendung sicherzustellen.

React ist die beliebteste JavaScript-basierte Bibliothek zum Erstellen schneller Single-Page-Anwendungen. Wenn Sie mit DOM gearbeitet und Anwendungen mit HTML, CSS und JavaScript erstellt haben, sollte es Ihnen nicht schwer fallen, auf die Arbeit in React umzusteigen.

React verwendet JSX, eine HTML-ähnliche Vorlagensprache. In vielerlei Hinsicht funktioniert es wie HTML, aber es gibt signifikante Unterschiede; Beispielsweise funktioniert das Festlegen von Inline-Stilen in JSX anders.

Wie Sie vielleicht wissen, sind Medienabfragen relativ einfach in CSS zu implementieren. Wenn Sie jedoch aus irgendeinem Grund Medienabfragen ohne CSS implementieren möchten, können Sie dies mit einfachem JavaScript in React erreichen.

Erstellen Sie Klassenkomponenten, um Medienabfragen in React ohne CSS festzulegen

Klassenkomponenten waren lange Zeit der primäre Weg, um in React eine Zustands-Funktionalität zu haben. Der state muss dafür sorgen, dass Ihre React-Komponente auf die Aktionen des Benutzers reagiert.

Mal sehen, wie wir die Medienabfragen in React-Klassenkomponenten ohne weiteres setzen können.

Beispiel:

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenSizeFits: window.matchMedia("(min-width: 768px)").matches
        };
    }

    componentDidMount() {
        const adjustScreenSize = (e) =>
            this.setState({ screenSizeFits: e.matches });
        window
            .matchMedia("(min-width: 768px)")
            .addEventListener("change", adjustScreenSize);
    }
    render() {
        return (
            <div>
                {this.state.screenSizeFits && <h1>Laptop</h1>}
                {!this.state.screenSizeFits && <h3>Smartphone or Tablet</h3>}
            </div>
        );
    }
}

export default App;

Wir haben eine App-Komponente mit einer state-Eigenschaft namens screenSizeFits. Es wird mit einem booleschen Wert initialisiert, den wir mit der Methode window.matchMedia() erhalten.

Wir verwenden die Lebenszyklusmethode componentDidMount(), um einen Ereignis-Listener hinzuzufügen und den Status zu aktualisieren. Wir fügen dem window-Objekt einen Event-Listener hinzu, sodass wir jedes Mal, wenn sich die Bildschirmauflösung ändert, die state-Variable entsprechend aktualisieren.

Ist die Bildschirmauflösung größer als 768 Pixel, wird die Eigenschaft screenSizeFits auf true gesetzt. Ist sie kleiner, wird die Eigenschaft auf false gesetzt.

Schließlich verwenden wir den einfachen logischen Konnektor &&, um den relevanten Text basierend auf dem Eigenschaftswert state anzuzeigen.

Sie können sich diese Live-Demo ansehen, um zu sehen, wie es funktioniert. Versuchen Sie, die Bildschirmgröße zu vergrößern oder zu verkleinern, und beobachten Sie, wie sich der Text entsprechend ändert.

Jedes Mal, wenn Sie die Bildschirmauflösung ändern, stellt die Komponente einen Ereignis-Listener ein und aktualisiert den Zustand entsprechend.

Erstellen Sie funktionale Komponenten, um Medienabfragen in React ohne CSS festzulegen

Seit React v16.8 können Sie Hooks verwenden, um interaktive Funktionen zu funktionalen Komponenten hinzuzufügen. Die React-Community hat die Bibliothek react-media-hook entwickelt, um Entwicklern zu helfen, Medienabfragen in funktionalen Komponenten einfach zu verwalten.

Sie können das Paket installieren, indem Sie diesen Befehl eingeben:

npm i react-media-hook --save

Dann können Sie den useMediaPredicate-Hook direkt in Ihre Anwendung importieren und damit beginnen, Ihre Anwendung basierend auf der Bildschirmgröße des Benutzergeräts bedingt zu gestalten.

Beispiel:

import React from "react";
import { useMediaPredicate } from "react-media-hook";

const App = () => {
    const moreThan720 = useMediaPredicate("(min-width: 720px)");

    return <div style={{border: moreThan720 ? "2px solid red" : ""}}>
        <button>SomeButton</button>
    </div>
};

In diesem Beispiel speichert die Variable moreThan720 einen booleschen Wert, abhängig davon, ob das Argument, das wir an den Hook useMediaPredicate übergeben, true ist oder nicht.

Dann verwenden wir den ternären Operator, um Inline-Stile bedingt festzulegen. Wenn die Fensterbreite 720px überschreitet, setzen wir eine Rahmeneigenschaft auf den folgenden Wert: 2px solid red; wenn nicht, wird es keine Grenze geben.