React能不能根组件加一个滚动监听,然后分发到每一个路由中去

#1

我想的是,在每一个路由中注册个scroll方法,在根组件滚动时会触发当前路由中的scroll,然后在这个方法中执行当前路由的业务逻辑

#2

方案一: 弄一个类似这种的组建,放到需要用到的 View 中去

class Loadmore extends React.PureComponent {
  componentDidMount() {
    const { targetNode } = this.props;
    targetNode.addEventListener('scroll', this.listener);
  }
  componentWillUnmount() {
    const { targetNode } = this.props;
    targetNode.removeEventListener('scroll', this.listener);
  }
  listener = throttle((e) => {
    if (!this.props.isActive) {
      return;
    }
    const target = e.target;
    const scrollBottom = target.scrollTop + target.clientHeight;
    const offsetBotton = target.scrollHeight - scrollBottom;
    if (offsetBotton <= this.props.offset) {
      this.props.onLoad(e);
    }
  }, 200, {
    trailing: true,
  })
  render() {
    return null;
  }
}

方案二,弄个类似上边那种的高阶组建,包裹需要监听 scroll 的组件
方案三,在根组件中放置一个类似方案一的组件,在监听到滚动的时候触发 redux action ,把需要记录额滚动信息作为 payload 丢进 state 然后在需要的组件中取用

#3

但是还是需要每个路由引入一次啊