请求将React Calendar Timeline Class组件转为Functional组件

核心转换要点 #

• 用useState替代Class组件的this.state，拆分独立状态变量
• 用useEffect替代componentDidMount等生命周期方法处理初始化逻辑
• 移除this关键字，直接定义事件处理函数
• 使用函数式状态更新确保基于最新状态修改

完整Functional组件代码 #

import React, { useState, useEffect } from 'react';
import Timeline from 'react-calendar-timeline';
import 'react-calendar-timeline/lib/Timeline.css';

const MyTimeline = () => {
  // 初始化分组与事项状态
  const [groups, setGroups] = useState([
    { id: 1, title: '分组1' },
    { id: 2, title: '分组2' }
  ]);

  const [items, setItems] = useState([
    {
      id: 1,
      group: 1,
      title: '事项1',
      start_time: new Date().getTime(),
      end_time: new Date().getTime() + 1000 * 60 * 60 * 2
    },
    {
      id: 2,
      group: 2,
      title: '事项2',
      start_time: new Date().getTime() + 1000 * 60 * 60,
      end_time: new Date().getTime() + 1000 * 60 * 60 * 3
    }
  ]);

  // 模拟异步加载数据（替代componentDidMount）
  useEffect(() => {
    const fetchTimelineData = async () => {
      // 此处可替换为真实接口请求逻辑
      // const res = await fetch('/api/timeline');
      // const data = await res.json();
      // setGroups(data.groups);
      // setItems(data.items);
    };
    fetchTimelineData();
  }, []);

  // 处理事项拖动事件
  const handleItemMove = (itemId, dragTime, newGroupId) => {
    setItems(prevItems => 
      prevItems.map(item => {
        if (item.id === itemId) {
          const duration = item.end_time - item.start_time;
          return {
            ...item,
            group: newGroupId,
            start_time: dragTime,
            end_time: dragTime + duration
          };
        }
        return item;
      })
    );
  };

  // 处理事项缩放事件
  const handleItemResize = (itemId, newTime, edge) => {
    setItems(prevItems => 
      prevItems.map(item => {
        if (item.id === itemId) {
          return edge === 'left' 
            ? { ...item, start_time: newTime } 
            : { ...item, end_time: newTime };
        }
        return item;
      })
    );
  };

  return (
    <div style={{ height: '400px' }}>
      <Timeline
        groups={groups}
        items={items}
        defaultTimeStart={new Date().getTime() - 1000 * 60 * 60}
        defaultTimeEnd={new Date().getTime() + 1000 * 60 * 60 * 4}
        onItemMove={handleItemMove}
        onItemResize={handleItemResize}
      />
    </div>
  );
};

export default MyTimeline;

转换细节说明 #

1. 状态管理：将原Class组件中统一的state拆分为groups和items两个独立状态，使用useState分别初始化，便于单独更新。
2. 生命周期替换：原组件挂载时的数据加载逻辑移至useEffect中，空依赖数组[]确保该逻辑仅在组件首次渲染时执行一次。
3. 事件处理优化：事件处理函数直接定义在组件内部，无需绑定this，避免Class组件中常见的绑定冗余。
4. 状态更新安全：使用函数式更新（prevItems => ...）确保每次状态修改都基于最新的状态快照，避免异步更新导致的状态不一致问题。

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