如何在NextJS函数式组件中向DatePicker传递props并解决类型报错

问题原因 #

1. 你给DatePickerComponent定义的props类型仅包含name和可选的text两个属性，没有包含要透传给内部DatePicker的原生属性，TypeScript检测到你传递了类型定义之外的showMonthDropdown这类属性，就会抛出类型错误。
2. 原组件代码存在语法错误：箭头函数体缺少起始花括号，}) => 后直接声明useState变量，未用{包裹函数体，运行时会直接抛出语法错误。

修复方案 #

引入react-datepicker的内置Props类型，将自定义属性和该类型做交叉，让组件支持所有react-datepicker的合法属性，同时补全缺失的函数体花括号即可，修正后完整代码如下：

import React, { useState } from 'react';
import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

// 交叉类型：自定义属性 + react-datepicker所有原生属性
const DatePickerComponent: React.FC<{ 
  name: string; 
  text?: (text: string) => string 
} & ReactDatePickerProps> = ({
  name,
  text,
  ...props
}) => { // 补全缺失的左花括号
  const [startDate, setStartDate] = useState(new Date());
  return (
    <>
      <DatePicker
        dateFormat="dd/mm/yyyy"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        {...props}
      />
    </>
  );
};

export default DatePickerComponent;

修改完成后你提到的两种组件调用方式都可以正常运行，不会再报类型错误。

内容的提问来源于stack exchange，提问作者LTM