React
Componenti dell'ordine superiore

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


introduzione

Componenti ordine superiore (in breve "HOC") è un modello di progettazione di un'applicazione reattiva che viene utilizzato per migliorare i componenti con codice riutilizzabile. Consentono di aggiungere funzionalità e comportamenti alle classi di componenti esistenti.

Un HOC è una pura funzione javascript che accetta un componente come argomento e restituisce un nuovo componente con la funzionalità estesa.

Osservazioni

Gli HOC sono spesso usati nelle librerie di terze parti. Come la funzione di connessione di Redux.

Semplice componente di ordine superiore

Diciamo che vogliamo console.log ogni volta che il componente monta:

hocLogger.js 

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

Usa questo HOC nel tuo codice:

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

Componente ordine superiore che verifica l'autenticazione

Diciamo che abbiamo un componente che dovrebbe essere visualizzato solo se l'utente è loggato.

Quindi creiamo un HOC che verifica l'autenticazione su ogni 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;

Quindi usiamo questo componente di ordine superiore nei nostri componenti che dovrebbe essere nascosto agli utenti anonimi:

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

Questo esempio è descritto in maggior dettaglio qui .



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow