reactjs - React — 父元素的 onScroll 监听器？

Question

如何在组件中添加 onScroll 监听器以捕获父元素的滚动？

class ChildDiv extends React.Component {
  constructor() {
    super();
  }
  handleScrollOfParent() {
    // do stuff when parent <main> scrolls;
  }
  render() {
    return (
      <div id="child" onScroll={this.handleScrollOfParent.bind(this)}>
        // content with overflow: hidden and scroll handled by parent MAIN.
      </div>
    )
  }
}
export default ChildDiv;

在父主干中渲染，如下所示 <main><ChildDiv /></main>我想捕获主要的滚动。

Answer 1

您可以:

1)尝试从子组件中抓取父节点:

componentDidMount() {
  ReactDOM.findDOMNode(this).parentNode.addEventListener(...
}

2) 将父节点作为 props 传递，并在渲染后附加监听器:

在父级中:

render{
  return(
    <div className="parent" ref={(elem)=>{this.node=elem}}>
      <Child parentNode={this.node}/>
    </div>
  )
}

在子进程中(parentNode 在构造函数中仍未定义，请检查下一个 props):

componentWillReceiveProps(newProps){
  newProps.parentNode.addEventListener(...
}