如何将日期数组传递给 react-dates 组件？答案

【问题标题】：How to pass an array of dates to react-dates component?如何将日期数组传递给 react-dates 组件？
【发布时间】：2017-08-01 10:28:46
【问题描述】：

我正在使用 DayPickerSingleDateController 组件。我在该州的一个数组中保留了一组要突出显示的日期。我在文档中没有明确说明如何将该数组作为道具传递给组件（如果可能的话）。

我希望是这样的：

<DayPickerSingleDateController highlightedDates={this.state.highlightedDates} />

我怎样才能实现这个功能？

【问题讨论】：

它应该可以正常工作。
@Kinduser 不，它没有。刚刚用 highlightDates 测试：['2017-08-01']。我的意思是 prop 传递给组件，当然，但是没有效果。
如果 props 被正确传递，只需查看有关此组件的文档。如果文档不包含任何相关内容，请考虑更改日期选择器，material-ui 有一个很好的选择。
文档中定义了一个 isDayHighlighted: PropTypes.func 属性类型 (github.com/airbnb/react-dates)，但我对如何将其应用于我描述的用例有点困惑 :)

标签： javascript reactjs react-dates

【解决方案1】：

好的，我从故事中知道了 (https://github.com/airbnb/react-dates/tree/master/stories)

import isSameDay from 'react-dates/lib/utils/isSameDay';
...

render() {
    ...
    let datesList = this.state.highlightedDates.map(date => {
        return moment(date);
    });
    ...
    return (
        <DayPickerSingleDateController
            isDayHighlighted={day1 => datesList.some(day2 => isSameDay(day1, day2))}
        />
    );
}

【讨论】：