Hallo, dieser Artikel ist eine Fortsetzung
dieses Beitrags , in dem ich beschlossen habe, eine Reihe kleiner Tutorials zum Erstellen eines UI-Kits zu starten. Es wird beschrieben, wie Sie mithilfe des Kontexts ein Anwendungsthema erstellen. Heute möchte ich die Anwendung durch einen anderen Kontext ergänzen, der uns hilft, die Komponenten der Benutzeroberfläche basierend auf dem Gerät des Benutzers anzuzeigen.
In diesem Beispiel werde ich auch das Modul
create-react-context .
Der Aufgabenbaum ist identisch mit dem vorherigen. Nennen wir den neuen
Medienkontextordner .
media-context/ MediaConsumer/ MediaConsumer.js index.js MediaProvider/ MediaProvider.js index.js constants.js context.js index.js
Wir werden uns schnell mit
Indizes befassen.
media-context / index.js export { MediaProvider } from './MediaProvider'; export { MediaConsumer } from './MediaConsumer';
theme-context / MediaConsumer / index.js export { MediaConsumer } from './MediaConsumer';
theme-context / MediaProvider / index.js export { MediaProvider } from './MediaProvider';
theme-context / context.jsErstellen
createContext wie vor
createContext (
npm-Modul ).
import createContext from 'create-react-context'; const { Provider, Consumer } = createContext(); export { Provider, Consumer };
Wir importieren, zerstören und exportieren die resultierenden Komponenten.
media-context / constants.jsSpeichern Sie die Variablen hier.
export const devices = ["mobile", "tablet", "desktop", "native"]; export const defaultDevice = "mobile";
Bei einem adaptiven Ansatz verwendet der Benutzer hauptsächlich vier Arten von Geräten - Desktop-, Tablet-, Mobil- und native Anwendungen (native). Andere mögliche Geräte: Smart-TV, Uhr usw. In diesem Beispiel verwenden wir nur
Mobile & Desktop .
Thema-Kontext / MediaProvider / MediaProvider.jsWie wir bereits wissen, ist Provider in
React.Context verfügbar, das die Verbraucher mit Kontext „füttert“. Es ermöglicht ihnen, zuzuhören und auf sich ändernde Kontexte zu reagieren.
Requisiten sind
device und
touchable . Ich möchte Sie daran erinnern, dass alle an den Werteanbieter übergebenen Werte den Verbrauchern zur Verfügung stehen.
import React from "react"; import PropTypes from "prop-types"; import { Provider } from "../context"; import { devices, defaultDevice } from "../constanst"; function MediaProvider(props) { const device = devices.includes(props.device) ? props.device : props.defaultDevice; return <Provider value={{ ...props, device }}>{props.children}</Provider>; } MediaProvider.propTypes = { device: PropTypes.oneOf(devices), touchable: false, children: PropTypes.node }; MediaProvider.defaultProps = { device: defaultDevice, touchable: false }; export { MediaProvider };
Thema-Kontext / MediaConsumer / MediaConsumer.jsEine Beschreibung der Funktionalität des Verbrauchers finden Sie im vorherigen Artikel. Kurz gesagt, der
Consumer reagiert auf den Kontext und gibt eine neue Komponente zurück.
In diesem Fall übergeben wir zwei Parameter an untergeordnete
children : den Gerätetyp und ob das Gerät berührungsempfindlich ist.
import React from "react"; import PropTypes from "prop-types"; import { defaultTo } from "lodash"; import { devices, defaultDevice } from "../constanst"; import { Consumer } from '../context'; function MediaConsumer(props) { return ( <Consumer> {media => props.children({ touchable: defaultTo(media.touchable, props.defaultTouchable), device: defaultTo(media.device, props.defaultDevice), })} </Consumer> ) } MediaConsumer.propTypes = { defaultTouchable: PropTypes.bool, defaultDevice: PropTypes.oneOf(devices), children: PropTypes.func.isRequired }; MediaConsumer.defaultProps = { defaultDevice, defaultTouchable: false }; export { MediaConsumer };
Jetzt ist ein neuer Kontext in unserer Anwendung verfügbar. Verwenden wir ihn.
import React from "react"; import ReactDOM from "react-dom"; import { isMobile } from "react-device-detect"; import cx from "classnames"; import { ThemeConsumer, ThemeProvider } from "./theme-context"; import { MediaConsumer, MediaProvider } from "./media-context"; import "./styles.css"; function renderSVG({ device, touchable }) { if (device === "mobile" && touchable) { return "https://image.flaticon.com/icons/svg/124/124114.svg"; } if (device === "tablet" && touchable) { return "https://image.flaticon.com/icons/svg/124/124099.svg"; } if (device === "desktop") { return "https://image.flaticon.com/icons/svg/124/124092.svg"; } } function MyComponent() { const renderMyComponent = (theme, media) => { const myComponentClassName = cx("my-class", { "my-class-dark": theme === "dark", "my-class-light": theme === "light" }); return ( <div className="wrapperDiv"> <object className={myComponentClassName} data={renderSVG(media)} type="image/svg+xml" /> </div> ); }; return ( <MediaConsumer> {media => ( <ThemeConsumer> {theme => renderMyComponent(theme, media)} </ThemeConsumer> )} </MediaConsumer> ); } function App() { return ( <MediaProvider device={isMobile ? "mobile" : "desktop"} touchable={isMobile} > <ThemeProvider theme="light"> <MyComponent /> </ThemeProvider> </MediaProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Um den Medienwettbewerb nutzen zu können, benötigen wir einen Mediendetektor (um Informationen über das Gerät des Benutzers zu erhalten). In unserer Anwendung gibt es keinen Mediendetektor. Nehmen wir es also von hier aus -
React -Device- Detect , nämlich das
isMobile- Flag.
Wie beim Kontextthema werden wir unsere Testkomponente in einen Medienanbieter einbinden. Der Wert der Requisiten, die der Anbieter an sein Konto weitergibt, wird vom Gerät des Kunden beneidet. Ich ging von einem Handy aus, wir senden eine mobile Version der Website von einem Computer - Desktop.
Den Arbeitscode finden Sie hier .
Um den Unterschied zu erkennen, folgen Sie dem Link eines Desktop- und mobilen Browsers.
Das ist alles! Jetzt hat unsere Anwendung zwei Kontexte, mit denen wir vielseitigere und flexiblere Komponenten in unserem UI-Kit erstellen können. Im nächsten Beitrag werde ich versuchen, eine komplexe Komponente unter Verwendung beider Kontexte zu erstellen. Ich hoffe, Sie finden den Artikel hilfreich.
Vielen Dank.