如何在 NextJS 功能组件中将道具传递给 DatePicker

Question

在 nextJS 项目中，我有一个与 DatePicker 一起使用的组件。我需要将 showMonthYearDropdown 或 showMonthDropdown showYearDropdown 作为道具传递给那个 copmonent。这是 DatePickerComponent 组件

 const DatePickerComponent: React.FC<{ name: string; text?: (text: string) => string }> = ({
  name,
  text,
  ...props
}) =>
  const [startDate, setStartDate] = useState(new Date());
  return (
    <>
      <DatePicker
        dateFormat="dd/mm/yyyy"
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        {...props}
      />
    </>
  );
};

这就是我将这个组件与道具一起使用的方式

<DatePickerComponent name='datepicker' showMonthDropdown showYearDropdown />

或

<DatePickerComponent name='datepicker' showMonthYearDropdown />

但是我得到这个错误：Property 'showMonthDropdown' does not exist on type 'IntrinsicAttributes。

有人知道这段代码有什么问题吗？提前致谢。

Answer 1

您需要向组件本身声明这些类型：

const DatePickerComponent: React.FC<{
  name: string;
  text?: (text: string) => string;
  showMonthDropdown: boolean;
  showYearDropdown: boolean;
  showMonthYearDropdown: boolean;
}>;

Answer 2

其中一些是可选的

const DatePickerComponent: React.FC<{
  name: string;
  text?: (text: string) => string;
  showMonthDropdown?: boolean;
  showYearDropdown?: boolean;
  showMonthYearDropdown?: boolean;
}>;

如何在 NextJS 功能组件中将道具传递给 DatePicker

How to pass props to DatePicker in NextJS functional Component

datepicker

reactjs

next.js