Реагировать на стиль большого календаря предыдущих дней до текущей даты - PullRequest
Новая
       20

Реагировать на стиль большого календаря предыдущих дней до текущей даты

3 голосов
/ 22 марта 2019

Я бы хотел стилизовать фон предыдущих дней в соответствии с текущей датой.

Я пытаюсь следовать этому примеру здесь , но я получаю ошибку:

Инвариантное нарушение: ожидается, что React.Children получит единственный дочерний элемент 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
    }}
/>

Спасибо! :)

1 Ответ

1 голос
/ 22 марта 2019

В 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',
    },
});
...