React Ant Design DatePicker 组件：字符串日期值接收与格式化

以下是一个基于 React 的 Ant Design DatePicker 组件的示例 TSX 代码，其中添加了一个 props 属性 valueStr，可以接收字符串类型的日期值，并且根据 picker 属性的值使用不同的格式化方式：

import React, { useState, useEffect } from 'react';
import { DatePicker } from 'antd';
import moment, { Moment } from 'moment';

interface Props {
  value?: Moment;
  valueStr?: string;
  picker?: 'year' | 'month' | 'week' | 'date' | 'time' | 'quarter' | undefined;
  onChange?: (value: Moment | undefined, dateString: string) => void;
}

const MyDatePicker: React.FC<Props> = ({ value, valueStr, picker, onChange }) => {
  const [date, setDate] = useState<Moment | undefined>(value);

  useEffect(() => {
    if (valueStr) {
      const newDate = moment(valueStr);
      setDate(newDate);
    }
  }, [valueStr]);

  const handleDateChange = (newDate: Moment | null, dateString: string) => {
    if (onChange) {
      onChange(newDate, dateString);
    }
    setDate(newDate);
  };

  const getFormat = () => {
    switch (picker) {
      case 'year':
        return 'YYYY';
      case 'month':
        return 'YYYY-MM';
      case 'week':
        return 'YYYY-wo';
      case 'quarter':
        return 'YYYY-Q';
      case 'time':
        return 'HH:mm:ss';
      default:
        return 'YYYY-MM-DD';
    }
  };

  return (
    <DatePicker
      value={date}
      onChange={handleDateChange}
      format={getFormat()}
      picker={picker}
    />
  );
};

export default MyDatePicker;

在组件中，首先定义了一个 props 接口，包含 value、valueStr、picker 和 onChange 属性，其中 value 和 onChange 与 Ant Design DatePicker 组件的属性相同，picker 是一个新属性，表示当前选择的日期类型，valueStr 是一个字符串类型的日期值，用于接收并转换为 Moment 类型的日期值。

然后，使用 useState Hook 来定义 date 状态，其初始值为 value 值，当 valueStr 属性改变时，使用 useEffect Hook 将其转换为 Moment 类型的新的日期值，并更新 date 状态。

接下来，定义 handleDateChange 函数，用于处理 DatePicker 组件的 onChange 事件。当日期值改变时，将新值和日期字符串传递给 onChange 回调函数，并更新 date 状态。

最后，定义 getFormat 函数，根据 picker 属性的值来返回不同的日期格式，在组件中使用 DatePicker 组件，并设置 value、onChange、format 和 picker 属性，其中 format 属性调用 getFormat 函数动态获取日期格式。

这样，就完成了一个基于 React 的 Ant Design DatePicker 组件，可以接收字符串类型的日期值，并根据 picker 属性的值使用不同的格式化方式。