antd - 在特定日历日期呈现数据

Question

目标：在日期选择器指定的日期在日历中显示数据。

问题：我无法将数据分配给特定日期 -所有日历日期都显示相同的数据。

通过将一个函数传递给它的 dateCellRender 属性来呈现日历组件，该属性生成要在单元格中显示的内容。传递给 dateCellRender 的函数接受一个时刻对象作为其唯一参数，该参数由 datepicker 表单生成。我检查了 Moment 对象，那里的一切看起来都很好，即调用 moment.date() 返回一个数字。

我试图模仿文档中的模式，但我一直遇到同样的问题。

我真正感到困惑的是过滤应该发生在哪里以及幕后发生了什么。是否为日历中的每个单元格调用 dateCellRender 并仅在满足条件时才显示内容？

谢谢。

文档示例 Calendar 在每个月的 8 日、10 日和 15 日显示列表数据。我把它放在这里是为了方便。我的代码如下。

function getListData(value) {
  let listData;
  switch (value.date()) {
    case 8:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'normal', content: 'This is usual event.' },
      ]; break;
    case 10:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'normal', content: 'This is usual event.' },
        { type: 'error', content: 'This is error event.' },
      ]; break;
    case 15:
      listData = [
        { type: 'warning', content: 'This is warning event' },
        { type: 'normal', content: 'This is very long usual event。。....' },
        { type: 'error', content: 'This is error event 1.' },
        { type: 'error', content: 'This is error event 2.' },
        { type: 'error', content: 'This is error event 3.' },
        { type: 'error', content: 'This is error event 4.' },
      ]; break;
    default:
  }
  return listData || [];
}

function dateCellRender(value) {
  const listData = getListData(value);
  return (
    <ul className="events">
      {
        listData.map(item => (
          <li key={item.content}>
            <span className={`event-${item.type}`}>●&lt;/span>
            {item.content}
          </li>
        ))
      }
    </ul>
  );
}

ReactDOM.render(
  <Calendar dateCellRender={dateCellRender} />
, mountNode);

我的探索代码。当从日期选择器中选择第三个时，每个月的每一天都会显示“测试”。

  testDate = () => {
    console.log("in testDate", moment.date()); 
    if (moment.date() === 3) { 
      return "foo";
  };

  render() {
    return <Calendar dateCellRender={this.testDate} />
  }

当 moment.date() === 3 时，我希望在每个月的第三天显示“foo”，但它会在每个日期显示。

没有错误消息。

标签： antd