React
Onderdelen van hogere orde

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


Invoering

Higher Order Components (in het kort "HOC") is een ontwerppatroon voor reacttoepassingen dat wordt gebruikt om componenten te verbeteren met herbruikbare code. Ze maken het mogelijk om functionaliteit en gedrag aan bestaande componentklassen toe te voegen.

Een HOC is een pure JavaScript-functie die een component accepteert als argument en een nieuwe component retourneert met de uitgebreide functionaliteit.

Opmerkingen

HOC's worden vrij vaak gebruikt in bibliotheken van derden. Zoals de Redux connect- functie.

Eenvoudig onderdeel met hogere order

Laten we zeggen dat we console.log willen telkens wanneer de component wordt geactiveerd:

hocLogger.js 

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

Gebruik deze HOC in uw 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);

Hogere bestelcomponent die controleert op authenticatie

Stel dat we een component hebben die alleen moet worden weergegeven als de gebruiker is aangemeld.

Dus maken we een HOC die controleert op de authenticatie bij elke render ():

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;

We gebruiken dan gewoon deze component voor hogere bestellingen in onze componenten die voor anonieme gebruikers moeten worden verborgen:

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);

Dit voorbeeld wordt hier gedetailleerder beschreven.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow