本文介绍: 其实很多时候ts语法机制问题,主要是类型匹配上不,将这些类型改写成any即可为什么有的时候可以按照官网用不出错,有时又会出错呢?因为项目使用版本不一。

原因分析

其实很多时候ts语法机制问题,主要是类型匹配上不,将这些类型改写成any即可
为什么有的时候可以按照官网用不出错,有时又会出错呢?因为项目使用版本不一。
如何解决?请看下面:

1.antd官网源码

代码如下示例):

  const { RangePicker } = DatePicker
  const dateFormat = 'YYYY-MM-DD'
  type RangeValue = [Dayjs | null, Dayjs | null] | null
  const [dates, setDates] = useState<RangeValue&gt;(null)
  const [value, setValue] = useState<RangeValue&gt;(null)
//设置可选范围最大为15天
  const disabledDate = (current: Dayjs) => {
    if (!dates) {
      return false
    }
    const tooLate = dates[0] &amp;&amp; current.diff(dates[0], 'days') > 15
    const tooEarly = dates[1] &amp;&amp; dates[1].diff(current, 'days') > 15
    return !!tooEarly || !!tooLate
  }
  //每次选择清空一次记录
  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null])
    } else {
      setDates(null)
    }
  }
  //获取日期范围字符串
  const onCalendarChange = (val: any) => {
    setDates(val)
    try {
      let start = moment(val[0].valueOf()).format('YYYY-MM-DD')
      console.log(start)
      setstartdate(start)
      if (val[1] !== null || val[1] !== undefined) {
        let end = moment(val[1].valueOf()).format('YYYY-MM-DD')
        console.log(end)
        setenddate(end)
      }
    } catch (e) {
      message.error('请按顺序输入起始日期!')
    }
  }
//日期选择组件
  const operations = (
    <div>
        <RangePicker
          locale={locale}
          allowClear={false}
          defaultValue={[
            dayjs('2022-09-03', dateFormat),
            dayjs('2022-09-18', dateFormat),
          ]}
          value={dates || value}
          disabledDate={disabledDate}
          onCalendarChange={onCalendarChange}
          onChange={(val) => setValue(val)}
          onOpenChange={onOpenChange}
        />
    </div>
  )

2.修改代码

主要是在定义时将类型都改为any方法参数current: Dayjs类型也改为current: any
对于开始时间结束时间,我们自己定义state放入,这样就解决了所有错误

const { RangePicker } = DatePicker;
const [dates, setDates] = useState<any>(null);
const [value, setValue] = useState<any>(null);
const [startdate, setstartdate] = useState<any>();
const [enddate, setenddate] = useState<any>();

//设置可选范围最大为15天
  const disabledDate = (current:any ) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] &amp;&amp; current.diff(dates[0], 'days') > 15;
    const tooEarly = dates[1] &amp;&amp; dates[1].diff(current, 'days') > 15;
    return !!tooEarly || !!tooLate;
  };
  //每次选择清空上一次记录
  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null]);
    } else {
      setDates(null);
    }
  };
  //获取日期范围字符串
  const onCalendarChange = (val: any) => {
    setDates(val);
    try {
      let start = moment(val[0].valueOf()).format('YYYY-MM-DD');
      console.log(start);
      setstartdate(start);
      if (val[1] !== null || val[1] !== undefined) {
        let end = moment(val[1].valueOf()).format('YYYY-MM-DD');
        console.log(end);
        setenddate(end);
      }
    } catch (e) {
      message.error('请按顺序输入起始日期!');
    }
  };

//日期选择组件
  const operations = (
    <div>
        <RangePicker
          locale={locale}
          allowClear={false}
          //defaultValue={[dayjs('2022-09-03', dateFormat), dayjs('2022-09-18', dateFormat)]}
          defaultValue={[startdate, enddate]}
          value={dates || value}
          disabledDate={disabledDate}
          onCalendarChange={onCalendarChange}
          onChange={onChange}
          onOpenChange={onOpenChange}
        />
    </div>
  );

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注