React
Komponenty wyższego rzędu

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


Wprowadzenie

Komponenty wyższego rzędu (w skrócie „HOC”) to wzorzec projektowania aplikacji reagujący, który służy do ulepszania komponentów za pomocą kodu wielokrotnego użytku. Umożliwiają dodanie funkcjonalności i zachowań do istniejących klas komponentów.

HOC to czysta funkcja javascript, która przyjmuje komponent jako argument i zwraca nowy komponent z rozszerzoną funkcjonalnością.

Uwagi

HOC są dość często używane w bibliotekach stron trzecich. Takich jak funkcja połączenia Redux.

Prosty element wyższego rzędu

Powiedzmy, że chcemy konsoli.log za każdym razem, gdy montuje się komponent:

hocLogger.js 

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

Użyj tego HOC w swoim kodzie:

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

Składnik wyższego rzędu, który sprawdza uwierzytelnienie

Załóżmy, że mamy komponent, który powinien być wyświetlany tylko wtedy, gdy użytkownik jest zalogowany.

Dlatego tworzymy HOC, który sprawdza uwierzytelnienie na każdym renderowaniu ():

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;

Następnie używamy tego komponentu wyższego rzędu w naszych komponentach, które powinny być ukryte przed anonimowymi użytkownikami:

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

Ten przykład jest opisany bardziej szczegółowo tutaj .



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow