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.
34 lines
1.1 KiB
34 lines
1.1 KiB
function logProps(Component) {
|
|
class LogProps extends React.Component {
|
|
componentDidUpdate(prevProps) {
|
|
console.log('old props:', prevProps);
|
|
console.log('new props:', this.props);
|
|
}
|
|
|
|
render() {
|
|
// highlight-next-line
|
|
const {forwardedRef, ...rest} = this.props;
|
|
|
|
// Assign the custom prop "forwardedRef" as a ref
|
|
// highlight-next-line
|
|
return <Component ref={forwardedRef} {...rest} />;
|
|
}
|
|
}
|
|
|
|
// Note the second param "ref" provided by React.forwardRef.
|
|
// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
|
|
// And it can then be attached to the Component.
|
|
// highlight-range{1-3}
|
|
function forwardRef(props, ref) {
|
|
return <LogProps {...props} forwardedRef={ref} />;
|
|
}
|
|
|
|
// These next lines are not necessary,
|
|
// But they do give the component a better display name in DevTools,
|
|
// e.g. "ForwardRef(logProps(MyComponent))"
|
|
// highlight-range{1-2}
|
|
const name = Component.displayName || Component.name;
|
|
forwardRef.displayName = `logProps(${name})`;
|
|
|
|
return React.forwardRef(forwardRef);
|
|
}
|
|
|