如何在React中构建类似Whimsical的流程图或示意图

可直接使用的React相关库 #

• react-gantt-timeline：专门针对这类时间轴调度场景封装的轻量组件，原生支持任务块拖拽、时长缩放、时间轴精度切换、资源分组，基础需求可以直接开箱使用
• @devexpress/dx-react-scheduler：成熟的调度类组件库，支持高度自定义渲染，可通过配置实现甘特图效果，适配复杂的业务逻辑需求
• 若项目已接入Ant Design生态，可直接使用@ant-design/charts提供的甘特图组件，和现有设计规范兼容性更高
• 如果需要极强的自定义能力，可搭配react-beautiful-dnd拖拽库自行实现布局，自由度最高

自主实现的核心思路 #

如果不想引入额外第三方依赖，可以按以下步骤实现：

1. 布局拆分：左侧固定资源列表，右侧为横向可滚动的时间轴区域，两块区域做滚动高度同步
2. 网格生成：根据选中的时间粒度（小时/天/周/月）计算每个时间单位的宽度，用CSS Grid生成背景对齐网格
3. 任务块定位：每个任务根据开始/结束时间计算横向偏移量和宽度，用绝对定位挂载到对应网格位置
4. 交互实现：监听任务块的鼠标/触摸事件，拖拽时实时计算时间偏移量，同步更新任务的开始/结束时间，同时做边界碰撞检测避免任务超出时间轴范围
5. 性能优化：当任务/资源量级超过千条时，引入虚拟滚动仅渲染可视区域内的元素，避免页面卡顿

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