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

Question

我在添加自定义工具栏来响应大日历时遇到困难。我正在打字稿中对此进行编码，但在我的自定义工具栏组件中传递道具时遇到困难，而我的父类不会接受。 我知道是关于工具栏道具导致了错误，但是与正常反应相比，它应该如何实现，这让我偏离了方向。

自定义工具栏.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

我的日历.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 = ({date, onNavigate}: ToolbarProps)  => {

    const goToBack = () => {
        onNavigate('PREV');    }

    const goToNext = () => {
        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>
    )
}

Answer 2

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

希望这有帮助。