为何封装react-datepicker时必须传入excludeScrollbar属性？

我在封装react-datepicker组件时，为了传递原组件的所有属性，从react-datepicker中导入了DatePickerProps，但发现excludeScrollbar属性被设为必填项，这是为什么？

相关代码示例 #

DatePickerCommon.tsx

import DatePicker, { DatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type Props = DatePickerProps & {
  label: string;
};

export const DatePickerComponent = ({ label, ...datePickerProps }: Props) => {
  return (
    <label>
      <span>{label}</span>
      <DatePicker {...datePickerProps} />
    </label>
  );
};

App.tsx

import "./styles.css";
import { DatePickerComponent } from "./components/DatePickerCommon";
import { useState } from "react";

export default function App() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  return (
    <div className="App">
      <DatePickerComponent
        excludeScrollbar={false} // 为啥这个属性必须传？
        label="Date"
        onChange={setStartDate}
        selected={startDate}
        onSelect={setStartDate}
      />
    </div>
  );
}

原因分析 #

问题出在react-datepicker的类型定义上：DatePickerProps里的excludeScrollbar被标记为必填项（没有加?修饰符），但实际上原组件内部已经给这个属性设置了默认值，只是类型定义没有同步更新这个细节。当你直接继承DatePickerProps时，TypeScript会严格按照类型定义的要求，强制你传入所有标记为必填的属性，哪怕组件本身有默认值兜底。

解决方法 #

方法一：用Omit排除excludeScrollbar，转为可选 #

修改Props类型，把excludeScrollbar从必填列表中移除，让它变成可选属性：

type Props = Omit<DatePickerProps, "excludeScrollbar"> & {
  label: string;
};

这样在使用DatePickerComponent时，就不需要手动传递excludeScrollbar了，原组件会自动使用内部的默认值。

方法二：给组件参数添加默认值 #

在DatePickerComponent的参数解构中，给excludeScrollbar设置默认值，满足TypeScript的类型要求：

export const DatePickerComponent = ({ label, excludeScrollbar = false, ...datePickerProps }: Props) => {
  return (
    <label>
      <span>{label}</span>
      <DatePicker excludeScrollbar={excludeScrollbar} {...datePickerProps} />
    </label>
  );
};

这样即使外部不传递excludeScrollbar，组件也会用默认值false，同时符合类型检查规则。

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