Popper.js改性剂

Question

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

但是，即使我们使用的是示例中的内容，我们也会得到以下类型记录错误：

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修饰符？

编辑:真正让我困惑的是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文档。

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