[英]Popper.js Modifiers
在我们的 React & Typescript 应用程序中,我们使用的是react-datepicker lib ,它本身使用 popper.js。 我正在尝试分配PopperModifiers
,如下所示: https : PopperModifiers
但即使我们完全使用示例中的内容,我们也会收到以下打字稿错误:
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)
为什么我们不能像示例中那样分配 Modifiers 数组? 任何人都有一个关于如何在打字稿中使用 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" />
您需要安装类型定义。
请参阅: https : //www.npmjs.com/package/@types/react-datepicker
您应该使用react-popper
文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.