React
उच्चतर आदेश घटक

परिचय

टिप्पणियों

सरल उच्च आदेश घटक

मान लीजिए कि हम हर बार कंपोनेंट को माउंट करने के लिए कंसोल करना चाहते हैं:

hocLogger.js

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

अपने कोड में इस HOC का उपयोग करें:

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

उच्च आदेश घटक जो प्रमाणीकरण के लिए जाँच करता है

मान लें कि हमारे पास एक घटक है जो केवल तभी प्रदर्शित होना चाहिए जब उपयोगकर्ता लॉग इन हो।

इसलिए हम एक HOC बनाते हैं जो प्रत्येक रेंडर पर प्रमाणीकरण के लिए जाँच करता है ():

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;

हम तो अपने घटकों में इस उच्च आदेश घटक का उपयोग करते हैं जो अनाम उपयोगकर्ताओं से छिपा होना चाहिए:

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

इस उदाहरण को यहां और अधिक विस्तार से वर्णित किया गया है ।