React KendoGrid自定义列组件不显示的解决方法问询

问题说明 #

需封装Kendo React DataGrid中重复使用的列（如createdAt、createdBy等）为独立自定义组件，简化Grid代码，但自定义组件无法在Grid中显示——原因是Kendo React DataGrid仅直接识别GridColumn类型的子组件；同时需要为自定义组件设置默认Props，允许传入Props覆盖默认值。

正确实现方案 #

1. 基础自定义列组件（带默认Props） #

自定义组件本质是返回配置好默认Props的GridColumn，同时支持传入Props覆盖默认值。以下是ColumnCreatedAt的实现：

import React from "react";
import { GridColumn } from "@progress/kendo-react-grid";
import { i18n } from "meteor/universe:i18n";

const ColumnCreatedAt = (props) => {
  // 合并默认Props与传入的Props，传入Props优先级更高
  const defaultProps = {
    field: "createdAt",
    title: i18n.__('grid.columnCreatedAt'),
    format: "{0:d}",
    filter: "date"
  };
  return <GridColumn {...defaultProps} {...props} />;
};

export default ColumnCreatedAt;

2. 复杂自定义列组件（如带自定义单元格/筛选器的ColumnCreatedBy） #

对于包含自定义cell、filterCell、columnMenu的列，同样通过合并默认Props实现：

import React from "react";
import { GridColumn } from "@progress/kendo-react-grid";
import { i18n } from "meteor/universe:i18n";
import KendoUserCell from "./KendoUserCell";
import KendoUserFilterCell from "./KendoUserFilterCell";
import DefaultGridColumnMenu from "./DefaultGridColumnMenu";
// 假设users数据已在合适位置引入

const ColumnCreatedBy = (props) => {
  const defaultProps = {
    field: "createdBy",
    title: i18n.__('languages.createdBy'),
    cell: KendoUserCell,
    filterCell: KendoUserFilterCell,
    columnMenu: (menuProps) => <DefaultGridColumnMenu values={users} {...menuProps} />
  };
  return <GridColumn {...defaultProps} {...props} />;
};

export default ColumnCreatedBy;

3. 简化后的Grid使用代码 #

使用自定义组件替代重复的GridColumn配置：

<Grid 
  data={...} 
  {...dataState} 
  sortable={true} 
  pageable={true} 
  pageSize={8} 
  resizable={true} 
  dataItemKey={'_id'} 
  selectable={{
    enabled: true,
    drag: false,
    cell: false,
    mode: "single",
  }}
>
  <Column field="native" filter="text" title={i18n.__('languages.native')}/>
  <Column field="published" filter="boolean" title={i18n.__('languages.published')}/>
  <ColumnCreatedAt />
  {/* 支持覆盖默认Props，比如自定义标题 */}
  {/* <ColumnCreatedAt title="自定义创建时间" /> */}
  <ColumnCreatedBy />
  <ColumnModifiedAt />
  <ColumnModifiedBy />
</Grid>

错误方案说明 #

之前尝试修改displayName、defaultProps但返回null的方式无效，因为Kendo Grid需要直接渲染GridColumn实例，仅修改组件元数据不会让Grid识别到有效列配置。正确的做法是让自定义组件直接返回配置完成的GridColumn，同时合并默认与传入Props。

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