Javascript Airbnb/react dates |是否有办法无限滚动月份而不是单击下个月？

我在移动浏览器的web react应用程序中有一个

react dates

组件。 该组件垂直显示月份视图

 <DayPickerRangeControllerWrapper
   orientation="vertical"
   numberOfMonths={3}
   verticalHeight={800}
 />

组件初始化为显示3个月。 要转到下个月，用户需要单击按钮

目标是通过滚动而不是单击来实现下个月的无限滚动显示。 例如，当用户向下滚动到显示的最后一个月时，应渲染下一个月（本例中为第四个月），依此类推

我查看了并找到了

onnextmonthlick

函数，但找不到通过滚动调用它的方法

我还尝试将

numberOfMonths

设置为一个较大的数字（24），但这会导致组件渲染延迟

---

是否可以通过滚动而不是单击来逐月延迟加载？

要通过用户滚动来呈现月份，您应该向DOM添加一个事件侦听器，并更新相对于滚动的月份数

例如：

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row } from "react-flexbox-grid";
import { DayPickerRangeController } from "react-dates";
import "react-dates/initialize";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numberOfMonths: 0 };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = (event) => {
    this.setState((state, props) => ({
      numberOfMonths: state.numberOfMonths++
    }));
  };
  render = () => {
    return (
      <Grid>
        <Row>
          <DayPickerRangeController
            orientation="vertical"
            numberOfMonths={this.state.numberOfMonths}
            verticalHeight={800}
          />
        </Row>
      </Grid>
    );
  };
}


ReactDOM.render(<App />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
从“react flexbox Grid”导入{Grid，Row}；
从“反应日期”导入{DayPickerAgeController}；
导入“反应日期/初始化”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={numberOfMonths:0}；
}
componentDidMount（）{
addEventListener（“scroll”，this.handleScroll，{passive:true}）；
}
组件将卸载（）{
window.removeEventListener（“滚动”，this.handleScroll）；
}
handleScroll=（事件）=>{
this.setState（（状态，道具）=>({
numberOfMonths:state.numberOfMonths++
}));
};
渲染=（）=>{
返回(
);
};
}
ReactDOM.render（
谢谢你，诺姆。这是一个有趣的方法。但是这个解决方案的问题是，在每个滚动事件上添加一个月，我的目标是在用户到达最后一个月时向下滚动添加一个月。