Popper.js 修饰符

Question

在我们的 React & Typescript 应用程序中，我们使用 react-datepicker lib，它本身使用 popper.js。我正在尝试分配PopperModifiers，如下所示：https://reactdatepicker.com/#example-configure-popper-properties

但即使我们使用 exactly 示例中的内容，我们也会收到以下打字稿错误：

Overload 1 of 2, '(props: ReactDatePickerProps |
Readonly<ReactDatePickerProps>): ReactDatePicker', gave the following
error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.   Overload 2 of 2, '(props: ReactDatePickerProps,
 context: any): ReactDatePicker', gave the following error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.ts(2769)

为什么我们不能像示例中那样分配修饰符数组？任何人都有一个关于如何将 popper 修饰符与 typescript 一起使用的示例？

编辑：真正让我困惑的是 Popper.Modifiers 类型的这个属性：

[name: string]: (BaseModifier & Record<string, any>) | undefined;

有人可以在这里解释一下吗？

EDI2：这是我们当前的 react-datepicker 实现，问题是 popperModifier 属性：

 <DatePicker
                selected={this.value ? new Date(this.value) : null}
                onChange={this.onChange}
                peekNextMonth
                showMonthDropdown={this.props.showMonthDropdown}
                showYearDropdown={this.props.showYearDropdown}
                dropdownMode={this.props.dropdownMode}
                dateFormat={i18next.t("common.dateformat")}
                popperPlacement="bottom-end"
                popperClassName="da-datepicker-popup"
                popperModifiers={[
                    {
                      name: "offset",
                      options: {
                        offset: [5, 10],
                      },
                    },
                    {
                      name: "preventOverflow",
                      options: {
                        rootBoundary: "viewport",
                        tether: false,
                        altAxis: true,
                      },
                    },
                  ]}
                includeDates={this.props.availableDates}
                adjustDateOnChange={false}
                yearDropdownItemNumber={this.props.yearDropdownItemNumber}
                maxDate={this.props.maxDate}
                minDate={this.props.minDate}
                strictParsing
                portalId="root-portal" />

Answer 1

您需要安装类型定义。

见：https://www.npmjs.com/package/@types/react-datepicker

Answer 2

您应该使用react-popper docs。

https://popper.js.org/docs/v2/modifiers/