React how to get wrapped component's height in HOC? - html

Question

Is there any way to get the wrapped component's DOM height?
I tried adding an ref but the console errors me Function components cannot be given refs.
And I set the forward ref, but it seems not the case.
export default function withInfiniteScroll(Component) {
return class extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.onScroll, true);
}
onScroll = () => {
// here
console.log(
'window.innerHeight👉', window.innerHeight,
'\ndocument.body.offsetHeight👉', document.body.offsetHeight,
);
}
render() {
return <Component {...this.props} />;
}
};
}
I want to log the height of Component, but these logs are meaningless, they are html-body's height instead of Component's.
window.innerHeight👉 767
document.body.offsetHeight👉 767
But when I in chrome console:
console.log(document.getElementsByClassName('home-container')[0].clientHeight)
> 1484
Which the 'home-container' is a wrapped component:
withInfiniteScroll(HomeContainer);

Answer 1

Wrapped component should either expose a ref to underlying DOM element with forwardRef:
function withInfiniteScroll(Component) {
return class extends React.Component {
ref = React.createRef();
componentDidMount() {
window.addEventListener('scroll', this.onScroll, true);
}
onScroll = () => {
console.log(this.ref.current.clientHeight);
}
render() {
return <Component ref={this.ref} {...this.props} />;
}
};
}
const Foo = React.forwardRef((props, ref) => (
<div ref={ref}>Foo</div>
));
const FooWithScroll = withInfiniteScroll(Foo);
Or wrapper component should add container DOM element:
function withInfiniteScroll(Component) {
return class extends React.Component {
// ...same as above
render() {
return <div ref={this.ref}><Component {...this.props} /></div>
}
};
}