Higher-Order Component: Convention: Pass Unrelated Props Through to the Wrapped Component
Convention: Pass Unrelated Props Through to the Wrapped Component
render() {
// Filter out extra props that are specific to this HOC and shouldn't be
// passed through
const { extraProp, ...passThroughProps } = this.props;
// Inject props into the wrapped component. These are usually state values or
// instance methods.
const injectedProp = someStateOrInstanceMethod;
// Pass props to wrapped component
return (
<WrappedComponent
injectedProp={injectedProp}
{...passThroughProps}
/>
);
}
HOCs should pass through props that are unrelated to its specific concern because HOCs shouldn’t drastically alter its contract and it’s expected that the component returned from a HOC has a similar interface to the wrapped component.