javascript - 将前几天的大日历样式反应到当前日期

Question

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

我正在尝试在此处遵循此示例，但出现错误：

Invariant Violation: React.Children.only 期望接收单个 React 元素子元素。

这很疯狂，因为它在示例中有效。此外，文档中没有关于 的信息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',
    },
});