react-date-range DateRangePicker无限滚动模式仅显示2个月求助

因为react-date-range已停止维护，官方示例的无限滚动逻辑在新版环境（比如React 18）下可能失效，以下是可行的修复方案：

1. 手动接管滚动监听与月份加载 #

官方示例的无限滚动依赖库内部的自动检测，可能因为DOM结构变化或React版本兼容问题失效，我们可以手动监听日历容器的滚动事件，动态添加新月份：

步骤： #

• 给DateRangePicker的日历容器添加自定义类名，比如infinite-scroll-calendar
• 使用useEffect监听该容器的滚动事件，判断是否滚动到接近底部的位置
• 手动更新months属性，增加月份数量

代码示例： #

import { useState, useEffect, useRef } from 'react';
import { DateRangePicker, Range } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

function InfiniteScrollDatePicker() {
  const [range, setRange] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: 'selection',
    },
  ]);
  const [displayedMonths, setDisplayedMonths] = useState(2); // 初始显示2个月
  const calendarRef = useRef(null);

  useEffect(() => {
    const calendarContainer = calendarRef.current?.querySelector('.rdrCalendarWrapper');
    if (!calendarContainer) return;

    const handleScroll = () => {
      // 判断是否滚动到距离底部100px以内
      if (
        calendarContainer.scrollTop + calendarContainer.clientHeight >=
        calendarContainer.scrollHeight - 100
      ) {
        // 每次滚动到底部，新增2个月
        setDisplayedMonths(prev => prev + 2);
      }
    };

    calendarContainer.addEventListener('scroll', handleScroll);
    return () => calendarContainer.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <DateRangePicker
      ranges={range}
      onChange={item => setRange([item.selection])}
      months={displayedMonths}
      scroll={{ enabled: true }}
      className="infinite-scroll-calendar"
      ref={calendarRef}
    />
  );
}

export default InfiniteScrollDatePicker;

2. 修复库内部的滚动检测bug #

如果上述方法仍有问题，可能是库内部的滚动判断逻辑错误，可以通过修改库的源码（或使用patch-package打补丁）来修复：

• 找到react-date-range内部的Calendar组件文件
• 查找滚动监听相关代码，修正滚动触发加载的条件（比如原逻辑可能错误判断了滚动方向或滚动位置）
• 使用patch-package保存修改，避免重新安装库后丢失更改

3. 降级React版本（临时方案） #

如果项目允许，可以尝试降级到React 17，因为react-date-range最后一次更新是在React 17时期，可能和React 18的严格模式或并发渲染存在兼容性问题。

内容的提问来源于stack exchange，提问作者Sumit Mittal