You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
719 B
27 lines
719 B
7 years ago
|
function logProps(WrappedComponent) {
|
||
|
|
class LogProps extends React.Component {
|
||
|
|
componentWillReceiveProps(nextProps) {
|
||
|
|
console.log('old props:', this.props);
|
||
|
|
console.log('new props:', nextProps);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {forwardedRef, ...rest} = this.props;
|
||
|
|
|
||
|
|
// Assign the custom prop "forwardedRef" as a ref
|
||
|
|
// highlight-range{1-3}
|
||
|
|
return (
|
||
|
|
<WrappedComponent ref={forwardedRef} {...rest} />
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Intercept the "ref" and pass it as a custom prop, e.g. "forwardedRef"
|
||
|
|
// highlight-range{1-3}
|
||
|
|
function logPropsForwardRef(props, ref) {
|
||
|
|
return <LogProps {...props} forwardedRef={ref} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
return React.forwardRef(logPropsForwardRef);
|
||
|
|
}
|