React TypeScript BigCalendar自定义工具栏传递道具

Question

我在添加自定义工具栏以响应大日历时遇到困难。我正在用typescript编写这个代码，但在自定义工具栏组件中传递我的父类不接受的道具时遇到了困难。我知道是工具栏道具导致了错误，但与正常反应相比，它应该如何实现，这让我偏离了方向。

自定义工具栏.tsx

export interface ICustomToolbarProps {
toolbar: ToolbarProps;  
}

const CustomToolbar = ({toolbar}: ICustomToolbarProps)  => {
const goToBack = () => {
toolbar.date.setMonth(toolbar.date.getMonth() - 1);
toolbar.onNavigate('PREV');    }
const goToNext = () => {
toolbar.date.setMonth(toolbar.date.getMonth() + 1);
toolbar.onNavigate('NEXT');
};
return (
<div className='rbc-toolbar'>
<PrimaryButton onClick={goToBack} style={{marginRight: "5px"}} text='Previous'/>
<DefaultButton onClick={goToNext} style={{marginRight: "5px"}} text='Next' />
<DatePicker />
</div>
)
}
export default CustomToolbar

MyCalendar.tsx

moment.tz.setDefault('Europe/Paris')
const localizer = momentLocalizer(moment)

const meetingRooms: IMeetingRoom[] = [
{
id: 1,
title: "Stort mødelokale",
color: "orange"
},
{
id: 2,
title: "Lille mødelokale",
color: "darkgreen"
}
]

const events: IEvent[] = [
{
id: 1,
title: "Store mødelokale",
allDay: false,
start: new Date(2022, 10, 3, 7, 30),
end: new Date(2022, 10, 3, 8, 20),
locationId: 1
},
{
id: 2,
title: "Lille mødelokale",
start: new Date(2022, 10, 3, 8, 30),
end: new Date(2022, 10, 3, 10, 0),
desc: "det her er det lille mødelokale",
locationId: 2
},
{
id: 3,
title: "Lille mødelokale",
start: new Date(2022, 10, 4, 8, 30),
end: new Date(2022, 10, 4, 11, 0),
locationId: 1
},
{
id: 4,
title: "Mødelokale Vest",
start: new Date(2022, 10, 5, 7, 40),
end: new Date(2022, 10, 5, 13, 15),
locationId: 2
},
]

const MyCalendar = () => {

const [newEvent, setNewEvent] = React.useState<IEvent>({ id: null, title: "", start: new Date(), end: new Date(), locationId: null });
const [allEvents, setAllEvents] = React.useState<IEvent[]>(events);
const handleAddEvent = () => {
setAllEvents([...allEvents, newEvent])
}

return (
<div>
<Stack tokens={{ childrenGap: "10px" }}>
<input
type="text"
value={newEvent.title} onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
placeholder='Add Title'
style={{ width: "20%", marginRight: "10px" }} />
<DatePicker placeholderText="Start Date" selected={newEvent.start} onChange={(start) => setNewEvent({ ...newEvent, start })} />
<DatePicker placeholderText="End Date" selected={newEvent.start} onChange={(end) => setNewEvent({ ...newEvent, end })} />
</Stack>
<PrimaryButton text='Add Event' style={{ marginTop: "10px" }} onClick={handleAddEvent}/>
<div >
<Calendar
/*Error is here on the components property
The expected type comes from property 'toolbar' which is declared here 
on type 'Components<IEvent, object>'
*/
components={{toolbar: CustomToolbar }}
defaultView='week'
localizer={localizer}
events={allEvents}
startAccessor="start"
onSelectEvent={event => alert(event.desc)}
endAccessor="end"
selectable
style={{ height: 1000, width: 1000, margin: "50px" }}
eventPropGetter={(event) => {
const room = meetingRooms.filter((room) => room.id === event.locationId)[0];
const backgroundColor = room ? room.color : "";
return { style: { backgroundColor: backgroundColor } }
}}
/>
</div>
<div></div>
</div>
)
}
export default MyCalendar

再次，我得到的错误是以下

index.d.ts(201, 5): The expected type comes from property 'toolbar' which is declared here on type 'Components<IEvent, object>'
index.d.ts(201, 5): The expected type comes from property 'toolbar' which is declared here on type 'Components<IEvent, object>'

No overload matches this call.
Overload 1 of 2, '(props: CalendarProps<IEvent, object> | Readonly<CalendarProps<IEvent, object>>): Calendar<IEvent, object>', gave the following error.
Type '({ toolbar }: { toolbar: any; }) => Element' is not assignable to type 'ComponentType<ToolbarProps<IEvent, object>>'.
Type '({ toolbar }: { toolbar: any; }) => Element' is not assignable to type 'FunctionComponent<ToolbarProps<IEvent, object>>'.
Types of parameters '__0' and 'props' are incompatible.
Property 'toolbar' is missing in type 'ToolbarProps<IEvent, object> & { children?: ReactNode; }' but required in type '{ toolbar: any; }'.
Overload 2 of 2, '(props: CalendarProps<IEvent, object>, context: any): Calendar<IEvent, object>', gave the following error.
Type '({ toolbar }: { toolbar: any; }) => Element' is not assignable to type 'ComponentType<ToolbarProps<IEvent, 

任何指导都将有助于

Answer 1

const CustomToolbar = (props: any) => { //Code }

希望这能有所帮助。