如何解决DevExtreme React DateBox中calendarOptions的cellTemplate失效问题？

问题说明 #

我发现DevExtreme React的cellTemplate官方示例实际用的是cellRender的写法，官方文档说明cellComponent和cellRender是cellTemplate在React中的别名。但在DateBox的calendarOptions中使用cellTemplate自定义周末单元格为红色时，日历显示空白（单元格仍可点击），代码示例如下：

import React from 'react';
import DateBox from 'devextreme-react/date-box';
import moment from 'moment';

const CustomDateBox = () => {
  const isWeekend = (date) => [0, 6].includes(moment(date).day());

  const renderCell = (cellData) => (
    <div style={{ color: isWeekend(cellData.date) ? 'red' : 'inherit' }}>
      {cellData.text}
    </div>
  );

  return (
    <DateBox
      labelMode="hidden"
      openOnFieldClick={true}
      hoverStateEnabled={false}
      calendarOptions={{
        cellTemplate: renderCell
      }}
    />
  );
};

export default CustomDateBox;

解决方案 #

在React环境下，嵌套配置（如calendarOptions）中需要使用React专属的cellRender属性，而非通用的cellTemplate。尽管文档称cellTemplate是别名，但在子组件的配置对象里，必须严格使用cellRender才能正确渲染自定义单元格内容。

修正后的代码如下：

import React from 'react';
import DateBox from 'devextreme-react/date-box';
import moment from 'moment';

const CustomDateBox = () => {
  const isWeekend = (date) => [0, 6].includes(moment(date).day());

  const renderCell = (cellData) => (
    <div style={{ color: isWeekend(cellData.date) ? 'red' : 'inherit' }}>
      {cellData.text}
    </div>
  );

  return (
    <DateBox
      labelMode="hidden"
      openOnFieldClick={true}
      hoverStateEnabled={false}
      calendarOptions={{
        // 替换cellTemplate为cellRender
        cellRender: renderCell
      }}
    />
  );
};

export default CustomDateBox;

内容的提问来源于stack exchange，提问作者hokwanhung