React Big Calendar - 自定义视图中的自定义道具答案

【问题标题】：React Big Calendar - Custom prop in a custom viewReact Big Calendar - 自定义视图中的自定义道具
【发布时间】：2021-10-14 12:22:47
【问题描述】：

我在 react-big-calendar 库中有一年自定义视图。

<Calendar
  localizer={localizer}
  events={events || []}
  startAccessor="start"
  endAccessor="end"
  defaultView="year"
  views={{
    year: YearView
  }}
  components={{
    toolbar: props => (<Toolbar {...props} />)
  }}
/>

我需要在 YearView 中传递另一个道具，我试图这样传递

<Calendar
  localizer={localizer}
  events={events || []}
  startAccessor="start"
  endAccessor="end"
  defaultView="year"
  views={{
    year: props => (
      <YearView
        {...props}
        onCreateOrEdit={onCreateOrEdit}
      />
    )
  }}
  components={{
    toolbar: props => (<Toolbar {...props} />)
  }}
/>

但不起作用，弹出错误“TypeError：无法读取未定义的属性'title'”。另一种解决方案是使用 React Context，但在我的情况下，这不是一个选项，因为我使用的是 monorepo 并且组件位于另一个应用程序文件夹中。

YearView 组件

    export const YearView = React.memo(({
      events, 
      onCreateOrEdit, 
      range, 
      date, 
      action, 
      localizer, 
      ...props 
    }) => {
    const [modalIsOpen, setModalIsOpen] = React.useState(false)
    const [modalTitle, setModalTitle] = React.useState('')
    const [isEventosDoDia, setIsEventosDoDia] = 
      React.useState(false)
    const [dialogEventsArray, setDialogEventsArray] = 
      React.useState(events);
    const [months, setMonths] = React.useState([])

    React.useEffect(() => {
     const monthsArray = []
     const firstMonth = dates.startOf(date, 'year')
     
     for (let i = 0; i < 12; i++) {
       monthsArray.push(
        <Calendar
          key={i + 1}
          date={dates.add(firstMonth, i, 'month')}
          eventosDoMes={
            events.filter(
              meses => meses.mes === getMonthByNumber(i)
          )}
          modalTitle={modalTitle}
          setModalTitle={(title) => setModalTitle(title)}
          listaDeEvento={dialogEventsArray}
          setListaDeEvento={(
            eventos) => setDialogEventsArray(eventos
          )}
          isEventosDoDia={isEventosDoDia}
          setIsEventosDoDia={(
            eventosDia) => setIsEventosDoDia(eventosDia
          )}
          modalIsOpen={modalIsOpen}
          setModalIsOpen={(isOpen) => setModalIsOpen(isOpen)}
        />
      )
    }

     setMonths(monthsArray)
    }, [date, isEventosDoDia, modalIsOpen, modalTitle])

    return (
      <YearContainer {...props}>
        <EventsDialog
          isOpen={modalIsOpen}
          title={modalTitle}
          eventsList={dialogEventsArray}
          isEventosDoDia={isEventosDoDia}
          setModalIsOpen={(isOpen) => setModalIsOpen(isOpen)}
       />
           
       {months.map((month) => month)}
      </YearContainer>
    )
    })

    YearView.navigate = (date, action) => {
      switch (action) {
       case navigate.PREVIOUS:
        return dates.add(date, -1, 'year')

       case navigate.NEXT:
        return dates.add(date, 1, 'year')

       default:
        return date
     }
    }

    YearView.title = (date, { localizer }) => 
      localizer.format(date, 'YYYY')

以及 YearVew 文件中道具的 console.log。

"props": {
    "startAccessor": "start",
    "endAccessor": "end",
    "views": {
        "year": {
            "compare": null
        }
    },
    "popup": false,
    "step": 30,
    "drilldownView": "day",
    "titleAccessor": "title",
    "tooltipAccessor": "title",
    "allDayAccessor": "allDay",
    "resourceAccessor": "resourceId",
    "resourceIdAccessor": "id",
    "resourceTitleAccessor": "title",
    "longPressThreshold": 250,
    "dayLayoutAlgorithm": "overlap",
    "backgroundEvents": [],
    "length": 30,
    "getters": {},
    "components": {},
    "accessors": {},
    "doShowMoreDrillDown": true
}

【问题讨论】：

你能给我们展示一下 YearView 组件并给我们在 YearView 中 console.log({props}) 的结果吗？
是的，当然！我使用您要求的信息编辑了帖子。

标签： javascript reactjs react-hooks react-big-calendar

【解决方案1】：

首先，我注意到您记住了 YearView 组件。这可能会导致创建和使用静态 title 方法时出现问题。

我还注意到您将 prop 直接添加到 views 定义中的组件中，而不是作为 Calendar 本身的 prop。

<Calendar
  localizer={localizer}
  events={events || []}
  startAccessor="start"
  endAccessor="end"
  defaultView="year"
  onCreateOrEdit={onCreateOrEdit}
  views={{
    year: YearView
  }}
  components={{
    toolbar: Toolbar
  }}
/>

要知道的是，并非所有日历道具都传递给它的所有内部组件。您的自定义 View 组件可以将 prop 传递给它呈现的组件，但 Calendar 不能。它们在渲染时被传递给当前的View，但你永远无法访问Toolbar 中的那个道具。你可以通过阅读Calendar组件的render()方法的源代码看到这一点。

【讨论】：