基于moment和react把一年拆分成n个周，并且计算后自动滚动聚焦到某个周

    
 import { 
  Timeline,
} from 'antd';
import moment from 'moment';

const [weeks, setWeeks] = useState([]);
      const timeLineRef = useRef();
  const [selectWeek, setSelectWeek] = useState({
    date: moment().startOf('week').format('YYYY-MM-DD'),
    year: moment().startOf('week').format('YYYY'),
  });
const getTimeLine = () => {
    axios
      .post('xxx', {
        xxx     
       })
      .then((res) => {
        let weeks = [];
        const startDate = moment().startOf('year');
        const endDate = moment().endOf('year');
        while (startDate.isSameOrBefore(endDate)) {
          weeks.push({
            date: startDate.format('YYYY-MM-DD'),
            year: startDate.format('YYYY'),
          });
          startDate.add(1, 'week');
        }
            //根据接口返回对应的每个周的数据数量
        res?.stat?.map((item) => {
          weeks = weeks?.map((item2, index) => {
            if (index == Number(item.week) - 1) {
              return {
                ...item2,
                total_count: item?.total_count,
              };
            } else {
              return item2;
            }
          });
        });
        setWeeks(weeks);
      });
  };
//    根据时间判断在第几个周自动滚动到那个周
  const scrollTimeLine = () => {
    const date = new Date();
    const startOfYear = new Date(date.getFullYear(), 0, 1);
    const pastDaysOfYear = (date - startOfYear) / 86400000;
    const weekNumber = Math.ceil(
      (pastDaysOfYear + startOfYear.getDay() + 1) / 7,
    );
    formRef?.current?.setFieldsValue({
      created_at: [
        moment().startOf('week').format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'),
        moment()
          .endOf('week')
          .subtract(1, 'days')
          .format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'),
      ],
    });
    console.log(weekNumber, timeLineRef, moment().week(weekNumber), 'week');
    timeLineRef.current.scrollTop =
      (timeLineRef.current.scrollHeight / weeks.length) * (weekNumber - 1.5);
    // timeLineRef
  };
  useEffect(() => {
    getTimeLine();
  }, []);


    return    <div className={styles.timeLine} ref={timeLineRef}>
          {weeks?.length > 0 && (
            <Timeline>
              {weeks?.length > 0 &&
                weeks.map((week, index) => (
                  <Timeline.Item
                    key={index}
                    color={selectWeek?.date == week.date ? 'green' : 'blue'}
                    style={{ cursor: 'pointer' }}
                    onClick={() => {
                      console.log(
                        formRef,
                        moment().week(index).format('YYYY-MM-DD'),
                        '123',
                      );
                      formRef?.current?.setFieldsValue({
                        created_at: [
                          moment(week.date)
                            .startOf('week')
                            .format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'),
                          moment(week.date)
                            .endOf('week')
                            .subtract(1, 'days')
                            .format('YYYY-MM-DDTHH:mm:ss.SSS[Z]'),
                        ],
                      });
                      setSelectWeek(week);
                    
                    }}
                  >
                    {week.year}年第{index + 1}周{' '}
                    {week.total_count && <span>({week.total_count})</span>}
                  </Timeline.Item>
                ))}
            </Timeline>
          )}
        </div>