React 如何在 HOC 中获取包裹组件的高度？

Question

有什么方法可以获取包装组件的 DOM 高度吗？

我尝试添加一个 ref 但控制台出错 Function components cannot be given refs.

而我设置的是forward ref，但是好像不是这样。

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} />;
    }
  };
}

我想记录 Component 的身高，但是这些记录没有意义，它们是 html 的身高而不是 Component 的身高。

window.innerHeight 767 
document.body.offsetHeight 767

但是当我在 chrome 控制台中时：

console.log(document.getElementsByClassName('home-container')[0].clientHeight)
> 1484

其中 'home-container' 是包装组件：

withInfiniteScroll(HomeContainer);

Answer 1

包装的组件应该使用 forwardRef:

公开对底层 DOM 元素的引用

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);

或者包装器组件应该添加容器DOM元素：

function withInfiniteScroll(Component) {  
  return class extends React.Component {
    // ...same as above

    render() {
      return <div ref={this.ref}><Component {...this.props} /></div>
    }
  };
}

React 如何在 HOC 中获取包裹组件的高度？

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

html

dom

reactjs

react-ref