Question

我想根据活动月份中天的结构设置CalendarList组件的高度

我创建了一个函数来确定CalendarList的正确高度


    calendarHeightCalculator() {
        const currentMonth = moment(this.props.calendarStore.currentMonth, "YYYY-MM")

        if (currentMonth.startOf("month").weekday() === 5 && currentMonth.daysInMonth() > 30) {
            return 340
        }
        if (currentMonth.startOf("month").weekday() === 6 && currentMonth.daysInMonth() > 29) {
            return 340
        }
        return 300
    }

CalendarList组件通过其height属性调用该函数的每次重新渲染


     <CalendarList
        current={this.state.visibleMonth}
        //onVisibleMonthsChange={this._monthChangeEvent}CalendarList
        pastScrollRange={this.state.scrollRange.past}
        futureScrollRange={this.state.scrollRange.future}
        firstDay={1}
        theme={calendarTheme}
        markingType={'multi-dot'}
        pagingEnabled={true}
        scrollEnabled={false}
        horizontal={true}
        onDayPress={this._selectDate}
        markedDates={this.state.markedDates}
        calendarHeight={sizing.height(280)}
        calendarHeight={this.calendarHeightCalculator()} // <- this is the culprit
        dayComponent={(props) => (<CustomDay {...props} />)}
    />

我可以确认每次重新渲染都会调用它，并通过广泛使用console.log返回正确的高度值。但是CalendarList仅对初始值做出反应，而忽略以下重新渲染吗？

如何通过calendarHeightCalculator函数设置正确的高度？

Answer 1

更改日历高度不会触发状态更改，因此日历不会重新呈现。

如果您要重新渲染日历，请更改实际设置日历列表状态的内容。

看看组件，看看触发重新渲染的道具CalendarList.js

设置CalendarList高度动态响应本机

1 个答案: