[React] Implement a Higher Order Component with Render Props
阿新 • • 發佈:2017-12-19
conn ons implement rem most div splay src bsp
When making a reusable component, you‘ll find that people often like to have the API they‘re most familiar with, so in this lesson we‘ll recreate the withToggle
Higher Order Component using our new ConnectedToggle
render prop component.
function withToggle(Component) { function Wrapper(props, context) { const {innerRef, ...remainingProps}= props return ( <ConnectedToggle render={toggle => ( <Component {...remainingProps} toggle={toggle} ref={innerRef} /> )} /> ) } Wrapper.displayName = `withToggle(${Component.displayName || Component.name})` Wrapper.propTypes= {innerRef: PropTypes.func} Wrapper.WrappedComponent = Component return hoistNonReactStatics(Wrapper, Component) }
[React] Implement a Higher Order Component with Render Props