Hello all,
The standard higher order component pattern is something like this:
const HOC = (WrappedComponent) => {
return class extends React.Component {
/** do some stuff here, modify props, etc */
render(){
return <WrappedComponent {...this.props}/>
}
}
}
export default HOC;
Despite using these occasionally in the past I have come to realize I don’t understand a major feature of this pattern.
What I dont understand is how the this
context is set properly from within the HOC class.
How is it that this.props
when called from the HOC will refer to the props of the CHILD component and not the props of the HOC class?
Does anyone know how this passing of props takes place?
Thanks so much!