Ant Design DatePicker 组件: 接收字符串类型 value 并根据 picker 属性进行格式化

以下是一个基于 React 和 Ant Design 的 DatePicker 组件的代码示例，可以接收字符串类型的 value，并根据 picker 属性的值，在显示时进行相应的格式化。

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

interface IProps {
  value?: string;
  onChange?: (value: string) => void;
  picker?: 'date' | 'week' | 'month' | 'quarter' | 'year' | undefined;
}

const CustomDatePicker: React.FC<IProps> = ({ value, onChange, picker }) => {
  const [dateValue, setDateValue] = useState<moment.Moment | null>(value ? moment(value) : null);

  useEffect(() => {
    if (value) {
      setDateValue(moment(value));
    } else {
      setDateValue(null);
    }
  }, [value]);

  const handleOnChange = (newValue: moment.Moment | null) => {
    if (newValue) {
      const formattedValue = newValue.format(getFormatString(picker));
      onChange && onChange(formattedValue);
    } else {
      onChange && onChange('');
    }
    setDateValue(newValue);
  };

  const getFormatString = (picker?: string) => {
    switch (picker) {
      case 'week':
        return 'YYYY-[W]WW';
      case 'month':
        return 'YYYY-MM';
      case 'quarter':
        return 'YYYY-[Q]Q';
      case 'year':
        return 'YYYY';
      default:
        return 'YYYY-MM-DD';
    }
  };

  return (
    <DatePicker value={dateValue} onChange={handleOnChange} picker={picker} format={getFormatString(picker)} />
  );
};

export default CustomDatePicker;

在这个组件中，我们将传入的字符串类型的 value 转换为 moment 对象，并将其存储在组件内部的状态中。当 value 属性发生变化时，我们使用 useEffect 钩子函数对其进行更新。

在 handleOnChange 函数中，我们将新的值转换为相应的格式化字符串，并调用 onChange 回调函数将其传递出去。

getFormatString 函数根据 picker 属性的值来决定使用何种格式化字符串。对于不同的 picker 属性值，我们使用不同的 moment.js 格式化选项来处理日期和时间。

最后，我们将 DatePicker 组件的 value，onChange，picker 属性和 format 属性设置为相应的值。由于我们已经在 handleOnChange 函数中处理了转换和格式化，因此 format 属性将不起作用，但是它仍然需要设置为正确的格式化字符串。