将前几天的大日历风格反应到当前日期

Question

我想根据当前日期来设置前几天的背景样式。

我正在尝试遵循此 example here，但出现错误：

Invariant Violation: React.Children.only expected to receive a single React element child.

这太疯狂了，因为它在示例中有效。此外，文档中没有关于 dateCellWrapper 的信息，这没有多大帮助。

代码如下：

const ColoredDateCellWrapper = (children: any, value: any) =>
    React.cloneElement(Children.only(children), {
        style: {
            ...children.style,
            backgroundColor: value < this.state.currentDay ? 'lightgreen' : 'lightblue',
        },
    });

<BigCalendar
    showMultiDayTimes
    localizer={localizer}
    selectable
    selected={this.state.selected}
    onSelectEvent={this.onSelectEvent}
    onSelectSlot={this.onSelectSlot}
    events={this.state.events}
    step={60}
    timeslots={1}
    defaultView='week'
    startAccessor="start"
    endAccessor="end"
    defaultDate={new Date()}
    components={{
        dateCellWrapper: ColoredDateCellWrapper
    }}
/>

谢谢！ :)

Answer 1

您的代码的第一行有问题：

const ColoredDateCellWrapper = (children: any, value: any) =>

应该是：

const ColoredDateCellWrapper = ({ children: any, value: any }) =>

简而言之，您将两个参数传递给 ColoredDateCellWrapper，但它只需要 1 个。解构后您应该得到两个道具。

根据 OP 要求更新：

如果你不想使用解构，那么你可以这样做：

const ColoredDateCellWrapper = (props: any) =>
React.cloneElement(Children.only(props.children), {
    style: {
        ...props.children.style,
        backgroundColor: props.value < this.state.currentDay ? 'lightgreen' : 'lightblue',
    },
});

将前几天的大日历风格反应到当前日期

React Big Calendar style previous days to current date

javascript

reactjs

react-big-calendar