Reactjs 通过反应日期中的renderDayContents添加自定义详细信息的有效方法

我正在使用并尝试添加日历中需要的特定日期的自定义详细信息。下面是这方面的片段

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;

从“React”导入React；
导入“反应日期/初始化”；
导入“react dates/lib/css/_datepicker.css”；
从“时刻”中导入时刻；
从“反应日期”导入{SingleDatePicker}；
设c=0；
导出类MultiDatePicker扩展React.Component{
静态defaultProps={
日期：[]，
对,，
};
建造师（道具）{
超级（道具）；
此.state={
日期：空，
数据：[
{ "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=（天）=>{
var结果；
设a=this.state.data.map（（项）=>{
让formattedDay=day.format（“ll”）；
设key=Object.key（项）[0]；
让formattedKey=时刻（key）.format（“ll”）；
if（时刻（formattedDay）.isName（时刻（formattedKey）））{
结果=真；
返回；
}
});
控制台日志（结果）；
如果（结果==真）{
返回{day.format（“D”）}*；
}否则{
返回{day.format（“D”）}%；
}
};
render（）{
返回(
this.setState（{date}）//PropTypes.func.isRequired
聚焦={this.state.focused}//PropTypes.bool
onFocusChange={（{focused}）=>this.setState（{focused}}//PropTypes.func.isRequired
id=“您的_unique_id”//PropTypes.string.isRequired，
renderDayContents={this.renderDayContents}
/>
);
}
}
导出默认的多日期选择器；

我想确定这是一种添加自定义事件的有效方法，还是我采用了错误的方法，因为到目前为止，在我的状态下，一个数组中只有5个对象，但我很快希望它能够处理500多个数据，所以有没有优化或更好的方法来添加自定义事件