javascript - 如果将复合组件传递给 Waypoint，为什么需要用 React.forwardRef 包装它？

Question

https://www.npmjs.com/package/react-waypoint#children

我正在阅读这篇文章，为什么将复合组件传递给 Waypoint 需要用 React.forwardRef 包装它？我可以只用 div 包装复合组件然后我不必用 React.forwardRef 包装它吗？

我试图用 div 包装复合组件，但它没有按预期工作，永远不会调用 onEnter 或 onLeave 回调。但是，如果我按照教程使用 React.forwardRef 包装复合组件，它将按预期工作。

class Block extends React.Component {
  render() {
    return <div ref={this.props.innerRef}>Hello</div>
  }
}

const App = () => (
  <Waypoint>
    <div>
       <Block />
    </div>
  </Waypoint>
)

上面的代码不起作用，但我不知道为什么