React => Composants d'ordre supérieur

Introduction

Les composants d'ordre supérieur ("HOC" en bref) est un modèle de conception d'application de réaction utilisé pour améliorer les composants avec un code réutilisable. Ils permettent d'ajouter des fonctionnalités et des comportements aux classes de composants existantes.

Un HOC est une fonction javascript pure qui accepte un composant comme argument et renvoie un nouveau composant avec la fonctionnalité étendue.

Remarques

Les HOC sont assez souvent utilisés dans des bibliothèques tierces. Comme la fonction de connexion Redux.

Composant simple d'ordre supérieur

Disons que nous voulons console.log chaque fois que le composant est monté:

hocLogger.js

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

Utilisez ce HOC dans votre 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);

Composant d'ordre supérieur qui vérifie l'authentification

Disons que nous avons un composant qui ne devrait être affiché que si l'utilisateur est connecté.

Nous créons donc un HOC qui vérifie l'authentification sur chaque rendu ():

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;

Nous utilisons ensuite ce composant d'ordre supérieur dans nos composants qui doit être caché aux utilisateurs anonymes:

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

Cet exemple est décrit plus en détail ici .

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

React
Composants d'ordre supérieur

Recherche…

Introduction

Remarques

Composant simple d'ordre supérieur

Composant d'ordre supérieur qui vérifie l'authentification