怎么用React撸一个日程组件

本篇内容主要讲解“怎么用React撸一个日程组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用React撸一个日程组件”吧!

成都创新互联是一家专业提供滴道企业网站建设,专注与网站建设、网站设计、H5场景定制、小程序制作等业务。10年已为滴道众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

目录结构

└─Calendar
    │ data.d.ts 类型定义文件
    │ index.tsx 入口文件
    │
    ├─components
    │ ├─CalendatrHeader 头部容器组件
    │ │ │ index.less
    │ │ │ index.tsx
    │ │ │
    │ │ └─components
    │ │      ├─DailyOptions 顶部切换日期和切换模式状态组件
    │ │      │      index.less
    │ │      │      index.tsx
    │ │      │
    │ │      └─WeeklyOptions 周模式日期和星期组件
    │ │              index.less
    │ │              index.tsx
    │ │
    │ ├─Container 容器组件
    │ │      Container.tsx
    │ │      index.less
    │ │
    │ ├─ScheduleCantainer 下半部日程容器
    │ │      index.less
    │ │      index.tsx
    │ │
    │ └─ScheduleItem 灰色部分每一条日程组件
    │          index.less
    │          index.tsx
    │
    └─utils
            index.ts 工具文件

?拆分组件

仔细看图, 不难看出, 组件大块上我拆分成了三个部分:
Container容器: 该组件是整个组件的容器, 负责UI核心状态数据, 维护两个状态:

targetDay: 当前选中日期时间戳(为什么选用时间戳后续解释);
switchWeekAndDay: 保存日和周的状态;

CalendatrHeader头部容器组件: Container容器的子组件, 该组件负责切换日期, 改变组件周和日的状态; 该组件内, 包含日历组件, 星期组件, 日期筛选组件, 日和周切换组件, 今天按钮组件, 最后还有一个业务组件的容器(businessRender);

ScheduleCantainer日程容器组件: 该组件被25 (因为是从今天0点到次日凌晨0点的区间) 个scheduleRender组件撑开, 子组件还包括时间刻度组件;

scheduleRender: 特意说一下这个组件, 这个组件接受一个回调, 回调会返回一个JSX, 这个JSX就是调用者传入的自定义样式的日程组件(具体内容在后文讲吧);

这就是大致的组件拆分, 文字表达确实欠佳, 可以结合图片YY;

接下来就开干吧!!!

代码实现

先看一下接受的参数类型定义:

type dataType = {
  startTime: DOMTimeStamp; // 开始时间戳
  endTime: DOMTimeStamp; // 结束时间戳
  [propsName: string]: any; // 业务数据
};

type ContainerType = {
  data: dataType[]; // 业务数据
  initDay?: DOMTimeStamp; // 初始化时间戳
  onChange?: (params: DOMTimeStamp) => void; // 改变日期时的onChange方法
  height?: number; // ScheduleCantainer容器的高度
  scheduleRender?: ({
    data: dataType,
    timestampRange: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; // 传入的回调, 会接收到当前这条数据的业务数据, 当前业务数据所在的时间戳范围;
  businessRender?: ({ timestamp: DOMTimeStamp }) => React.ReactNode; // 传入的业务组件, 查询前端蔡徐坤那个, 看图, 想起来了吗?
  mode?: "day" | "week"; // 初始化展示日和天的模式
};

Container容器组件

代码:

const Container: React.FC = ({
  initDay,
  onChange,
  scheduleRender,
  businessRender,
  data,
  height = 560,
  mode = "day",
}) => {
  // 当前选择日期时间戳
  const [targetDay, setTargetDay] = useState(initDay);
  // 切换日和周
  const [switchWeekandDay, setSwitchWeekandDay] = useState<"day" | "week">(mode);

  return (
    
       {
          onChange(timestamp);
          setTargetDay(timestamp);
        }}
        businessRender={businessRender}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={setSwitchWeekandDay}
      />

); };

看代码可以思考一下, 肯定要将全局的状态数据提升到最高层级去控制, 也符合React的组件设计哲学;

维护了当前时间戳和日/周的状态, 所有子组件的状态都是根据targetDay去展示的;

CalendatrHeader头部容器组件

头部容器我觉得其他的还好, 由于星期是写死的(主要是参考了一下苹果的那个日程组件, 苹果的星期就没换, 所以参考大厂优秀的设计), 所以比较敲脑壳的就是如何能准确的展示一周的日期;

其实展示一周的日期我写了两种方式:

第一种是以当前的日期的星期为基准, 分别向前和向后去计算, 最后输出一个[29, 30, 31, 1, 2, 3, 4]这样的List, 如果恰巧今天是1号或者 2号, 就去拉去上个月最后一天的日期往前递减;

第二种方式就是下面代码的方式, 也是拿到当前日期的星期去定位, 通过时间戳去动态计算出来, 只要知道往前减几天, 往后追加几天就好了;

其实两种方式都可以, 最后我用了第二种, 显然第二种更加简洁;

如下图:

怎么用React撸一个日程组件

当前一周就要输出[12, 13, 14, 15, 16, 17, 18]

下面是上述难点具体实现的代码:

const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };

代码:

const CalendatrHeader: React.FC = ({
  targetDay,
  setTargetDay,
  switchWeekandDay,
  businessRender,
  setSwitchWeekandDay,
}) => {
  // 当前一周的日期
  const [dateTextList, setDateTextList] = useState([]);
  // 这个状态是在切换周的时候, 直接增加或者减少一周的时间戳, 下一周或者上一周的日期就会被自动算出来;
  const [currTime, setCurrTime] = useState(targetDay); 

  useEffect(() => {
    setDateTextList(calcWeekDayList(targetDay));
  }, [targetDay]);

  // 根据当前时间戳, 计算之前和之后天数的日期, 由于星期是固定不变的, 所以只计算当前一周的日期就好了
  const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };

  const onChangeWeek: (type: "prevWeek" | "nextWeek", switchWay: "week" | "day") => void = (
    type,
    switchWay,
  ) => {
    if (switchWay === "week") {
      const calcWeekTime =
        type === "prevWeek" ? currTime - 3600 * 1000 * 24 * 7 : currTime + 3600 * 1000 * 24 * 7;
      setCurrTime(calcWeekTime);
      setDateTextList([...calcWeekDayList(calcWeekTime)]);
    }

    if (switchWay === "day") {
      const calcWeekTime =
        type === "prevWeek" ? targetDay - 3600 * 1000 * 24 : targetDay + 3600 * 1000 * 24;
      setCurrTime(calcWeekTime);
      setTargetDay(calcWeekTime);
    }
  };

  return (
    
       {
          setSwitchWeekandDay(value);
          if (value === "week") {
            setDateTextList(calcWeekDayList(targetDay));
          }
        }}
        onChangeWeek={(type) => onChangeWeek(type, switchWeekandDay)}
      />
      {switchWeekandDay === "week" && (
        
      )}
      
        GMT+8

新网创想网站建设，新征程启航

怎么用React撸一个日程组件

目录结构

?拆分组件

代码实现

Container容器组件

CalendatrHeader头部容器组件

ScheduleCantainer详细日程容器

左侧刻度

ScheduleItem日程容器条目

其他资讯