React Big Calendar自定义年视图传递额外Prop报错如何解决？

报错原因 #

你在views配置中用匿名函数包裹YearView返回新组件时，没有继承原YearView挂载的navigate、title两个静态方法，react-big-calendar渲染时需要读取这两个静态方法处理视图导航和标题生成，找不到就抛出了TypeError: Cannot read property 'title' of undefined错误。

可用解决方案 #

方案1：直接给Calendar组件传自定义prop（最简） #

react-big-calendar会自动将所有未被自身消费的自定义prop透传给所有自定义视图组件，无需包装视图：

<Calendar
  localizer={localizer}
  events={events || []}
  startAccessor="start"
  endAccessor="end"
  defaultView="year"
  views={{
    year: YearView
  }}
  components={{
    toolbar: props => (<Toolbar {...props} />)
  }}
  {/* 直接传自定义prop，会自动透传给YearView */}
  onCreateOrEdit={onCreateOrEdit}
/>

传参后直接在YearView的props中就能正常读取onCreateOrEdit。

方案2：给包装后的视图组件手动继承静态方法 #

如果你确实需要对视图做包装处理，就给包装后的组件挂载原组件的静态方法：

// 先定义包装组件
const WrappedYearView = props => (
  <YearView
    {...props}
    onCreateOrEdit={onCreateOrEdit}
  />
)
// 手动继承原YearView的静态方法，供react-big-calendar调用
WrappedYearView.navigate = YearView.navigate
WrappedYearView.title = YearView.title

// Calendar配置中直接用包装后的组件
<Calendar
  localizer={localizer}
  events={events || []}
  startAccessor="start"
  endAccessor="end"
  defaultView="year"
  views={{
    year: WrappedYearView
  }}
  components={{
    toolbar: props => (<Toolbar {...props} />)
  }}
/>

额外优化提示 #

你当前YearView的useEffect依赖数组漏了events，会导致events更新时月份日历的事件列表不刷新，记得把events加到useEffect的依赖项里。

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