在 react-dates 中通过 renderDayContents 添加自定义细节的有效方法

如何解决在 react-dates 中通过 renderDayContents 添加自定义细节的有效方法

我正在使用 react-dates 并尝试在日历中需要时在特定日期添加自定义详细信息。下面是代码片段。

import React from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import moment from "moment";
import { SingleDatePicker } from "react-dates";

let c = 0;
export class MultiDatePicker extends React.Component {
  static defaultProps = {
    dates: [],focused: true,};
  constructor(props) {
    super(props);
    this.state = {
      date: null,data: [
        { "04/01/2021": "2048" },{ "06/12/2021": "2048" },{ "08/11/2021": "2048" },{ "02/08/2021": "2048" },{ "07/10/2021": "2048" },{ "01/10/2021": "2048" },],};
    this.renderDayContents = this.renderDayContents.bind(this);
  }
  renderDayContents = (day) => {
    var result;
    let a = this.state.data.map((item) => {
      let formattedDay = day.format("ll");

      let key = Object.keys(item)[0];
      let formattedKey = moment(key).format("ll");
      if (moment(formattedDay).isSame(moment(formattedKey))) {
        result = true;
        return;
      }
    });
    console.log(result);
    if (result == true) {
      return <span>{day.format("D")}*</span>;
    } else {
      return <span>{day.format("D")}%</span>;
    }
  };

  render() {
    return (
      <SingleDatePicker
        keepOpenOnDateSelect={true}
        date={this.state.date} // momentPropTypes.momentObj or null
        onDateChange={(date) => this.setState({ date })} // PropTypes.func.isrequired
        focused={this.state.focused} // PropTypes.bool
        onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isrequired
        id="your_unique_id" // PropTypes.string.isrequired,renderDayContents={this.renderDayContents}
      />
    );
  }
}

export default MultiDatePicker;

我想确定这是一种添加自定义事件的有效方法，还是我采用了错误的方法，因为截至目前我的状态中，我的数组中只有 5 个对象，但我很快希望它可以与 500 + 一起使用数据，那么是否有任何优化或更好的方法来添加自定义事件？