Question

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

system.graph('test_graph').create()

:remote config alias g test_graph.g

schema.config().option('graph.schema_mode').set('Development') //Not having this was probably giving you the error.

schema.propertyKey('testProperty').Text().create()

在父主页中呈现，就像这个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;一样，我想要捕捉主要的滚动。

Answer 1

您可以在父组件中定义一个状态变量，该变量将存储当前的scrollTop值（假设垂直滚动）并在每次scroll事件发生时更新，然后将此变量传递给ChildDiv这可以检测到变量在componentWillReceiveProps：

中发生了变化

if(this.props.yourVariable != nextProps.yourVariable){
// scroll event was fired => scroll position changed
}

Answer 2

根据React的本质，即将Parent从Parent传递给Children，所以当你想让Child元素更新它的父元素时，你需要在Parent上创建一个函数，并传递给Child作为道具

请同时参考我对类似问题的回答（如何触发父组件从孩子/孙子/孙子那里做某事）：

Re-initializing class on redirect

在您的情况下，我们可能会这样做：

1 /在Parent上创建一个函数，触发Parent本身做某事：

import React from 'react';

class Parent extends React.Component {

  constructor(props) {
    super(props);
    // ...
  }

  doSomeThingOnParent = () => {
    // do whatever you want with this Parent component, setState, forceUpdate etc.
  }

  render(){
    // ...
    <Child doSomeThingOnParent={this.doSomeThingOnParent} />
    // ...
  }
}

2 /在子组件上，使用onScroll触发上述功能：

class Child extends React.Component {
  ...
  render() {
    return (
      <div id="child" onScroll={this.props.doSomeThingOnParent}>
        // your content
      </div>
    )
  }
}

但是，您无法通过您提到的方式呈现父级，即：

您应该使用上面的Parent的渲染方法，并设置CSS以允许您的子组件溢出

Answer 3

你可以：

1）尝试从子组件中获取父节点：

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

2）将父节点作为props传递并在渲染后附加侦听器：

在父母：

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

并且在child中（parentNode在构造函数中仍未定义，请检入下一个道具）：

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

React - 父元素的onScroll侦听器？

3 个答案: