在 Typescript 中使用 react-dates

Question

我正在尝试将 react-dates 与 Typescript 一起使用，但不知道如何定义类型。

以下 TS/React 代码给出错误

Argument of type '"startDate" | "endDate" | null' is not assignable to parameter of type 'SetStateAction'. Type '"startDate"' is not assignable to type 'SetStateAction'.

我的代码是based on this，有没有更简单的方法来编写这段代码？谢谢！

import React, { useState } from 'react';

import moment from 'moment';
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from 'react-dates';

interface IHandleDatesChange {
    startDate: moment.Moment | null,
    endDate: moment.Moment | null,
}

export function Foo(): JSX.Element {
    const [ startDate, setStartDate ] = useState<moment.Moment | null>(moment('1990-01-01'));
    const [ endDate, setEndDate ] = useState<moment.Moment | null>(moment(moment().endOf('year')));
    const [ focusedInput, setFocusedInput ] = useState(null);

    const handleDatesChange = ({ startDate, endDate}: IHandleDatesChange) => {
        setStartDate(startDate);
        setEndDate(endDate);
    }

    return (
        <DateRangePicker
            startDate={startDate}
            startDateId='daterangepicker_start_date'
            endDate={endDate}
            endDateId='daterangepicker_end_date'
            onDatesChange={handleDatesChange}
            focusedInput={focusedInput}
            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}   // <== ERROR OCCURS
        />
    )
}

yarn.lock

react-dates@^21.8.0:
  version "21.8.0"
  resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.8.0.tgz#355c3c7a243a7c29568fe00aca96231e171a5e94"
  integrity sha512-PPriGqi30CtzZmoHiGdhlA++YPYPYGCZrhydYmXXQ6RAvAsaONcPtYgXRTLozIOrsQ5mSo40+DiA5eOFHnZ6xw==
  dependencies:
    airbnb-prop-types "^2.15.0"
    consolidated-events "^1.1.1 || ^2.0.0"
    enzyme-shallow-equal "^1.0.0"
    is-touch-device "^1.0.1"
    lodash "^4.1.1"
    object.assign "^4.1.0"
    object.values "^1.1.0"
    prop-types "^15.7.2"
    raf "^3.4.1"
    react-moment-proptypes "^1.6.0"
    react-outside-click-handler "^1.2.4"
    react-portal "^4.2.0"
    react-with-direction "^1.3.1"
    react-with-styles "^4.1.0"
    react-with-styles-interface-css "^6.0.0"

...

"@types/react-dates@^21.8.1":
  version "21.8.1"
  resolved "https://registry.yarnpkg.com/@types/react-dates/-/react-dates-21.8.1.tgz#f90b30895e22d15f42c64be6bbafb1796b5f05f8"
  integrity sha512-zgBf0SM6dcDPR29x3bCzSypK0c2+EKDkR4NNyBCwH2GyL/AgIvJ0bQ6n2z1s468SXS2QbzCMJtF831vG7iGkjg==
  dependencies:
    "@types/react" "*"
    "@types/react-outside-click-handler" "*"
    moment "^2.26.0"

...

moment@>=1.6.0, moment@^2.26.0, moment@^2.29.1:
  version "2.29.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==

Answer 1

编辑：

您还没有将类型传递给您的 focusedInput 状态。如果您检查 @types/react-dates 定义，onFocusChange 道具期望回调参数是特定类型：FocusedInputShape 是一个字符串联合 'startDate' | 'endDate'.

要修复，请更新您的状态初始化：

const [ focusedInput, setFocusedInput ] = useState<FocusedInputShape | null>(null);

原回答：

我似乎记得以前遇到过这个问题（或非常相似），结果证明是我项目中安装的依赖项与 react-dates 安装的依赖项之间 moment 版本不匹配。

检查安装了哪些版本，如果不匹配，up-/down-grade你的项目版本，如果你能看到它是否有所不同。

Answer 2

下面是我如何获得使用 TS 的基本示例。

import React, { ReactNode, useState } from 'react'
import moment, { Moment } from 'moment'
import 'react-dates/initialize'
import 'react-dates/lib/css/_datepicker.css'
import { DateRangePicker, FocusedInputShape } from 'react-dates'

const Calendar = () => {
  const [startDate, setStartDate] = useState<Moment | null>(moment())
  const [endDate, setEndDate] = useState<Moment | null>(null)
  const [focusedInput, setFocusedInput] = useState<FocusedInputShape | null>(
    null
  )

  const handlendDatesChange = (arg: {
    startDate: Moment | null
    endDate: Moment | null
  }) => {
    setStartDate(arg.startDate)
    setEndDate(arg.endDate)
  }

  const handleFocusChange = (arg: FocusedInputShape | null) => {
    setFocusedInput(arg)
  }

  return (
    <DateRangePicker
      /**
       * Tip for who is new to TS: You can view the type definition on hover in VSCode.
       * You can use these types on their respective useState and function.
       */
      startDate={startDate} // moment.Moment | null;
      startDateId="your_unique_start_date_id" // moment.Moment | null;
      endDate={endDate} // momentPropTypes.momentObj or null,
      endDateId="your_unique_end_date_id" // string;
      onDatesChange={handlendDatesChange} // (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
      focusedInput={focusedInput} // FocusedInputShape | null;
      onFocusChange={handleFocusChange} // (arg: FocusedInputShape | null) => void;
    />
  )
}

export default Calendar

在 Typescript 中使用 react-dates

Using react-dates with Typescript

javascript

typescript

reactjs

react-dates

react-typescript