本文介绍如何将两类不同来源的事件数据（如项目里程碑和会议室预订）合并后统一渲染到 React 日历组件中，核心是使用 JavaScript 展开运算符（...）合并数组，确保所有事件正确传递给 events 属性。
本文介绍如何将两类不同来源的事件数据（如项目里程碑和会议室预订）合并后统一渲染到 react 日历组件中，核心是使用 javascript 展开运算符（...）合并数组，确保所有事件正确传递给 `events` 属性。
在构建支持多类型事件的日历应用（例如兼顾项目管理与资源调度）时，一个常见需求是：在同一日历视图中并列展示项目里程碑（Milestones）和会议室预订（Reservations）。这两类事件通常结构相似（均有 id、title、start 等字段），但数据来源不同——里程碑可能来自项目 API 响应，而预订数据则存储在组件的 state 中。
直接将两个数组分别赋值给 events 属性会导致覆盖（如仅渲染 milestones 或仅渲染 reservations），而用逗号分隔（arr1, arr2）在 JSX 中属于语法错误，无法构成有效数组。
✅ 正确做法是：使用扩展运算符（...）将两个事件数组展开并合并为一个新数组。示例如下：
events={[
...milestones.map(milestone => ({
id: `milestone-${milestone.id}`, // 建议添加前缀避免 ID 冲突
title: `? ${milestone.description}`,
start: new Date(milestone.expectedDate), // 确保为 Date 对象
className: 'event-milestone' // 可选：便于样式区分
})),
...this.state.reservations.map(reservation => ({
id: `reservation-${reservation.id}`,
title: `? ${reservation.roomName} — ${reservation.purpose}`,
start: new Date(reservation.startTime),
end: new Date(reservation.endTime), // 若日历支持时段，建议提供 end
className: 'event-reservation'
}))
]}
? 关键注意事项：
-
ID 唯一性：务必确保合并后所有事件的
id全局唯一，否则日历可能渲染异常或交互失效（如点击事件错位）。推荐为不同来源事件添加类型前缀（如milestone-123/reservation-456）。 -
日期格式标准化：日历组件（如 FullCalendar、React Big Calendar）通常要求
start/end为Date实例。若原始数据为字符串（如'2025-04-10'），需显式转换：new Date(dateString)。 -
字段兼容性：确认两组事件对象具备日历所需的基础字段（如
title、start），必要时可统一映射（例如将reservation.roomName拼接进title）。 -
性能优化：若数据量较大，建议在
useMemo或componentDidUpdate中缓存合并结果，避免重复计算。
通过这种合并方式，你不仅能实现双事件源共存，还为后续扩展（如添加任务、休假等事件类型）预留了清晰、可维护的数据结构基础。
