React => Komponenter med högre ordning

Introduktion

Högre ordningskomponenter ("HOC" i korthet) är ett reaktionsapplikationsmönster som används för att förbättra komponenter med återanvändbar kod. De gör det möjligt att lägga till funktionalitet och beteenden i befintliga komponentklasser.

En HOC är en ren javascript-funktion som accepterar en komponent som argument och returnerar en ny komponent med den utökade funktionaliteten.

Anmärkningar

HOC används ganska ofta i tredjepartsbibliotek. Såsom Redux connect- funktionen.

Enkel komponent med högre ordning

Låt oss säga att vi vill console.log varje gång komponenten monteras:

hocLogger.js

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

Använd denna HOC i din kod:

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

Komponent med högre ordning som kontrollerar efter verifiering

Låt oss säga att vi har en komponent som bara ska visas om användaren är inloggad.

Så vi skapar en HOC som kontrollerar om autentiseringen för varje 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;

Vi använder sedan bara denna högre ordningskomponent i våra komponenter som bör döljas för anonyma användare:

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

Detta exempel beskrivs mer detaljerat här .

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

React
Komponenter med högre ordning

Sök…

Introduktion

Anmärkningar

Enkel komponent med högre ordning

Komponent med högre ordning som kontrollerar efter verifiering