javascript - 将前几天的大日历风格 react 到当前日期

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 个。解构后您应该得到两个 props。

按照 OP 的要求更新:

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

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