时间戳

首页 > 解决方案 > 使用 Typescript 反应大日历自定义视图

javascript - 使用 Typescript 反应大日历自定义视图

问题描述

我在使用键入的大日历创建自定义视图时遇到了麻烦，每次我在我的自定义周组件中使用诸如 Timegrid 之类的日历组件或任何其他组件时，我都会收到一个标准错误，例如react_devtools_backend.js:2560 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

如果我使用标准 HTML 或非大日历组件，自定义周仍然有效。

import {NavigateAction, TimeGrid} from 'react-big-calendar'
import moment = require('moment')

interface MyWeekProps {
  date: Date
}

export class MyWeek extends React.Component<MyWeekProps> {
  static title = (date: Date) => {
    return `My awesome week: ${date.toLocaleDateString()}`
  }

  static navigate = (date: Date, action: NavigateAction) => {
    switch (action) {
      case 'PREV':
        return moment(date).add(-3, 'day').toDate()

      case 'NEXT':
        return moment(date).add(3, 'day').toDate()

      default:
        return date
    }
  }

  static range = (date: Date) => {
    let start = date
    let end = moment(start).add(2, 'day')

    let current = start
    let range = []

    while (moment(current).isSameOrBefore(moment(end), 'day')) {
      range.push(current)
      current = moment(current).add(1, 'day').toDate()
    }

    return range
  }

  render() {
    let {date} = this.props
    let range = MyWeek.range(date)

    return <TimeGrid range={range} eventOffset={15}/>
//return <div>{date}<div/> no error
  }
}

然后用作

import {MyWeek} from 'reparator/rendezVous/rendezVousCustomWeek'

...

return <Calendar
    culture={culture}
    localizer={localizer}
    views={{month: true, week: MyWeek, day: true, agenda: true}}
    style={{height: props.fullScreen ? '800px' : '500px', width: '100%'}}
    messages={messages}
    startAccessor="start"
    endAccessor="end"
    min={minimum}
    max={maximum}
    timeslots={timeslots}
    step={step}
    events={props.rendezVous.map((rdv: RendezVous) => toEvent(rdv))}
    onSelectEvent={(event: EventRendezVous) => {
      if (!props.readOnly) {
        window.location.href = `#rendezVous/${event.id}/edition`
      }
    }}
    dayPropGetter={customDayPropGetter}
    slotPropGetter={customSlotPropGetter}
    eventPropGetter={customEventPropGetter}
    components={{
      event: customEvent,
      agenda: {
        event: customEventAgenda,
      },
    }}
  />

标签： javascriptreactjstypescriptreact-big-calendar

解决方案

所以正如基思建议的那样，打字稿版本有导出问题，导入无类型的完整模块解决了这个问题：

// @ts-ignore
import * as TimeGrid from 'react-big-calendar/lib/TimeGrid'

<TimeGrid {...this.props} range={range} eventOffset={15}/>

并使用它

推荐阅读