React.js High-order components----simple examples to understand higher-order component ideas

/** The higher-order component is actually a function that passes in a component that returns a new component * to implement logical multiplexing in different components, * to reuse some logic that can be extracted separately from the new component to be returned * and then pass a separate component to the new component **/import React, {Component} from' React 'Import Reactdom from' React-dom '//High -order component definition, return inside returns new componentfunctionLocal (Comp,key) {class Proxy extends component{//The constructor constructor defines your stateConstructor () {super ();  This. State={data: "}        }        //hook function, before component renderingComponentwillmount () {Let data=Localstorage.getitem (key);  This. SetState ({data})} Handblur= (Event) = ={Let data=Event.target.value;        Localstorage.setitem (Key,data); } render () {//Comp is a component passed in            return(                <comp handblur={ This. Handblur} data={ This.state.data}/>            )        }    }    returnProxy}//Define your individual componentsfunctionInput (props) {return<input type= "text" Defaultvalue={props.data} onblur={props.handblur}/>}functionTextareas (props) {return<textarea defaultvalue={props.data}></textarea>}functionDiv () {return<div>111</div>}//call a higher-order function to return a new functionLet Localinput=local (Input, ' username ') Let Localtextareas=local (textareas, ' content ') Let Localdiv=Local (DIV)//the total component to renderclass from extends Component {render () {return (            <div> <form>User name<LocalInput/> capacity <LocalTextareas/> <LocalDiv></LocalDiv> </form> </div>)}}reactdom.render (<from></from>,document.queryselector ("#root"))

React.js High-order components----simple examples to understand higher-order component ideas