React
Komponenten höherer Ordnung

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Suche…


Einführung

Komponenten höherer Ordnung (kurz "HOC") ist ein Designmuster für reaktive Anwendungen, mit dem Komponenten mit wiederverwendbarem Code verbessert werden. Sie ermöglichen das Hinzufügen von Funktionen und Verhalten zu vorhandenen Komponentenklassen.

Ein HOC ist eine reine Javascript-Funktion, die eine Komponente als Argument akzeptiert und eine neue Komponente mit der erweiterten Funktionalität zurückgibt.

Bemerkungen

HOCs werden häufig in Bibliotheken von Drittanbietern verwendet. Wie die Redux Connect- Funktion.

Einfache Komponente höherer Ordnung

Angenommen, wir möchten jedes Mal, wenn die Komponente aktiviert wird, console.log verwenden:

hocLogger.js 

export default function hocLogger(Component) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Hey, we are mounted!');
    }
    render() {
      return <Component {...this.props} />;
    }
  }
}

Verwenden Sie dieses HOC in Ihrem Code:

MyLoggedComponent.js 

import React from "react";
import {hocLogger} from "./hocLogger";

export class MyLoggedComponent extends React.Component {
    render() {
        return (
            <div>
                This component get's logged to console on each mount.
            </div>
        );
    }
}

// Now wrap MyLoggedComponent with the hocLogger function 
export default hocLogger(MyLoggedComponent);

Komponente höherer Ordnung, die die Authentifizierung überprüft

Nehmen wir an, wir haben eine Komponente, die nur angezeigt werden soll, wenn der Benutzer angemeldet ist.

Also erstellen wir ein HOC, das die Authentifizierung für jedes render () prüft:

AuthenticatedComponent.js 

import React from "react";

export function requireAuthentication(Component) {
    return class AuthenticatedComponent extends React.Component {

        /**
         * Check if the user is authenticated, this.props.isAuthenticated
         * has to be set from your application logic (or use react-redux to retrieve it from global state).
         */
        isAuthenticated() {
            return this.props.isAuthenticated;
        }

        /**
         * Render
         */
        render() {
            const loginErrorMessage = (
                <div>
                    Please <a href="/login">login</a> in order to view this part of the application.
                </div>
            );

            return (
                <div>
                    { this.isAuthenticated === true ? <Component {...this.props} /> : loginErrorMessage }
                </div>
            );
        }
    };
}

export default requireAuthentication;

Wir verwenden dann diese Komponente höherer Ordnung in unseren Komponenten, die für anonyme Benutzer ausgeblendet werden sollten:

MyPrivateComponent.js 

import React from "react";
import {requireAuthentication} from "./AuthenticatedComponent";

export class MyPrivateComponent extends React.Component {
    /**
     * Render
     */
    render() {
        return (
            <div>
                My secret search, that is only viewable by authenticated users.
            </div>
        );
    }
}

// Now wrap MyPrivateComponent with the requireAuthentication function 
export default requireAuthentication(MyPrivateComponent);

Dieses Beispiel wird hier genauer beschrieben.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow