如何将DevExpress Scheduler类组件的视图切换功能改造成函数组件实现

改写后的函数组件完整代码 #

import * as React from 'react';
import { useState } from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState } from '@devexpress/dx-react-scheduler';
import {
  Scheduler,
  WeekView,
  Appointments,
  Toolbar,
  ViewSwitcher,
  MonthView,
  DayView,
} from '@devexpress/dx-react-scheduler-material-ui';

import { appointments } from '../../../demo-data/month-appointments';

export default function Demo() {
  // 对应原Class组件的state定义
  const [data] = useState(appointments);
  const [currentViewName, setCurrentViewName] = useState('work-week');

  return (
    <Paper>
      <Scheduler
        data={data}
        height={660}
      >
        <ViewState
          defaultCurrentDate="2018-07-25"
          currentViewName={currentViewName}
          onCurrentViewNameChange={setCurrentViewName}
        />

        <WeekView
          startDayHour={10}
          endDayHour={19}
        />
        <WeekView
          name="work-week"
          displayName="Work Week"
          excludedDays={[0, 6]}
          startDayHour={9}
          endDayHour={19}
        />
        <MonthView />
        <DayView />

        <Toolbar />
        <ViewSwitcher />
        <Appointments />
      </Scheduler>
    </Paper>
  );
}

核心改动说明 #

• 原Class组件替换为函数组件，使用React内置useState Hook实现状态管理，完全替代原Class组件的state和setState逻辑
• 移除了构造函数、this绑定相关冗余代码，函数组件无需处理this指向问题
• 所有Scheduler配置、视图规则和原示例完全一致，视图切换功能的逻辑和效果与原Class组件完全等价

内容的提问来源于stack exchange，提问作者Meet Shah