javascript - 我是打字稿的新手当我编译我的代码给定没有重载匹配这个调用错误
问题描述
**当我编译我的代码时,我是打字稿的新手。我得到没有重载匹配这个调用错误。我做了什么来解决这个问题如果需要一些更改,请告诉我**
Datepicker.tsx
import * as React from 'react';
import './style.sass';
import {Abbreviations} from './components/abbreviations';
import {Day} from './components/day';
import {Header} from './components/header';
import {DatePicker} from './components/stateless_datepicker';
import {I18n, i18n as defaultI18n} from './i18n';
import {deltaDate, generateMatrix, getFirstDayOfMonth, getLastDayOfMonth, isInMatrix, sameDays} from './utils';
export * from './utils';
export * from './i18n';
export * from './components/stateless_datepicker';
export * from './components/header';
export * from './components/day';
export * from './components/abbreviations';
export function defaultOnKeyDown(
e: React.KeyboardEvent<HTMLElement>,
matrix: Date[][],
onChange: (date: Date) => void,
onScreenChange: (date: Date) => void,
onCursorChange: (date: Date) => void,
cursor: Date,
screen: Date
) {
if (e.key === 'enter') {
onChange(cursor);
return;
}
const cursorIsInMatrix = isInMatrix(matrix, cursor);
let newCursor: Date | null = null;
switch (e.key) {
case 'ArrowDown': {
newCursor = cursorIsInMatrix ? deltaDate(cursor, 0, 0, 7) : getFirstDayOfMonth(screen);
break;
}
case 'ArrowUp': {
newCursor = cursorIsInMatrix ? deltaDate(cursor, 0, 0, -7) : getLastDayOfMonth(screen);
break;
}
case 'ArrowLeft': {
newCursor = cursorIsInMatrix ? deltaDate(cursor, 0, 0, -1) : getLastDayOfMonth(screen);
break;
}
case 'ArrowRight': {
newCursor = cursorIsInMatrix ? deltaDate(cursor, 0, 0, 1) : getFirstDayOfMonth(screen);
break;
}
case 'Enter': {
onChange(cursor);
break;
}
}
if (newCursor) {
onCursorChange(newCursor);
onScreenChange(newCursor);
}
}
export interface SimpleDatePickerProps {
i18n?: I18n;
value: Date;
weekStart?: number;
onChange: (value: Date) => void;
renderDay?: (
day: Date,
value: Date,
screen: Date,
cursor: Date,
onClick: () => void,
onMouseMove: () => void
) => JSX.Element;
renderHeader?: (i18n: I18n, screen: Date, onScreenChange: (screen: Date) => void) => JSX.Element;
renderAbbreviations?: (i18n: I18n, weekStart: number) => JSX.Element;
}
export interface SimpleDatePickerState {
cursor: Date;
screen: Date;
}
export class SimpleDatePicker extends React.Component<SimpleDatePickerProps, SimpleDatePickerState> {
public state = {
cursor: new Date(this.props.value),
screen: new Date(this.props.value)
};
private onChange = (value: Date) => {
this.setState({
screen: value
});
this.props.onChange(value);
};
private onCursorChange = (cursor: Date) => {
this.setState({cursor});
};
private onScreenChange = (screen: Date) => {
this.setState({screen});
};
private onKeyDown = (keyDownEvent: React.KeyboardEvent<HTMLElement>, matrix: Date[][]) => {
defaultOnKeyDown(
keyDownEvent,
matrix,
this.onChange,
this.onScreenChange,
this.onCursorChange,
this.state.cursor,
this.state.screen
);
};
private renderDay = (
day: Date,
value: Date,
screen: Date,
cursor: Date,
onClick: () => void,
onMouseMove: () => void
) => {
return (
<Day
key={day.toString()}
day={day}
value={value}
screen={screen}
cursor={cursor}
onClick={onClick}
onMouseMove={onMouseMove}
/>
);
};
private renderAbbreviations = (i18n: I18n, weekStart: number) => {
return <Abbreviations i18n={i18n} weekStart={weekStart} />;
};
private renderHeader = (i18n: I18n, screen: Date, onScreenChange: (screen: Date) => void) => {
return <Header i18n={i18n} screen={screen} onScreenChange={onScreenChange} />;
};
public render() {
const weekStart = this.props.weekStart || 0;
const i18n = this.props.i18n || defaultI18n;
const matrix = generateMatrix(this.state.screen, weekStart);
const renderDay = (day: Date) =>
(this.props.renderDay || this.renderDay)(
day,
this.props.value,
this.state.screen,
this.state.cursor,
() => this.onChange(day),
() => {
if (!sameDays(day, this.state.cursor)) {
this.onCursorChange(day);
}
}
);
const abbreviations = (this.props.renderAbbreviations || this.renderAbbreviations)(i18n, weekStart);
const header = (this.props.renderHeader || this.renderHeader)(i18n, this.state.screen, this.onScreenChange);
return (
<DatePicker
matrix={matrix}
onKeyDown={e => this.onKeyDown(e, matrix)}
renderDay={renderDay}
abbreviations={abbreviations}
header={header}
/>
);
}
}
在 index.tsx 文件中导入日期选择器组件时出错我也尝试在 datepicker 文件中导出默认值,但它没有工作
index.js 文件
C:/Users/hp/Desktop/abacus-datepicker/src/index.tsx
TypeScript error in C:/Users/hp/Desktop/abacus-datepicker/src/index.tsx(10,6):
No overload matches this call.
Overload 1 of 2, '(props: SimpleDatePickerProps | Readonly<SimpleDatePickerProps>): SimpleDatePicker', gave the following error.
Type '{}' is missing the following properties from type 'Readonly<SimpleDatePickerProps>': value, onChange
Overload 2 of 2, '(props: SimpleDatePickerProps, context: any): SimpleDatePicker', gave the following error.
Type '{}' is missing the following properties from type 'Readonly<SimpleDatePickerProps>': value, onChange TS2769
**ReactDOM.render(
<React.StrictMode>
<SimpleDatePicker />
</React.StrictMode>,
document.getElementById('root')
);**
解决方案
错误很明显。
您正在尝试使用<SimpleDatePicker>
没有两个非可选道具的组件,value
并且onChange
.
尝试
<SimpleDatePicker value={new Date(Date.parse("2020-10-05"))} onChange={(newDate) => void 0} />
举一个最小的例子。
推荐阅读
- msbuild - msbuild 命令行是否有 whatif 开关?
- python - 我的 python 列表的两部分在只有一个应该改变时发生了变化
- c# - 在 .NET Core MVC 应用程序中使用 Azure B2C 和 Open Id Connect 进行静默 SSO 登录
- c# - 使用 SSIS 和脚本组件移动文件
- flutter - 压缩图像时 UI 冻结
- c - 删除链接排序列表中的第一个元素
- php - linux无法加载动态库php_ldap.dll
- arrays - 需要在mathematica中突出显示数组图中的某个元素
- sql-server - GROUP BY 或聚合函数错误消息
- ffmpeg - 使用 ffmpeg 创建具有多种质量的 m3u8 文件?