React Kendo网格设置数组项作为列字段

Question

我有所有类别为对象的products.json文件。如果数据格式在下面的链接中，则工作正常，但如果该json中的类别为数组，则失败。我正在尝试使用类别项目数组中的一列创建一个React网格。

示例： https://stackblitz.com/edit/react-txwobq?file=app/products.json

在类别块为

时效果很好

<Column field="Category.CategoryName" title="CategoryName" />

在带有以下json对象的网格代码中

"Category" : {
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}

但是我以

之类的类别获得了数组格式的外部api

"Category" : [{
    "CategoryID" : 1,
    "CategoryName" : "Beverages",
    "Description" : "Soft drinks, coffees, teas, beers, and ales"
}]

我试图像这样在react kendo网格中读取此值，但是没有运气。我在做什么错？

<Column field="Category[0].CategoryName" title="CategoryName" />

Answer 1

您可以将列绑定到“类别”（Category）字段，并定义自定义单元格组件，以呈现数组中的第一项。请检查以下示例：

列定义：

  <Column
    field="Category"
    title="Categories"
    cell={CategoryCell} 
  />

自定义单元格：

const CategoryCell = (props) => {
   const category = props.dataItem[props.field][0];

   return <td>{category.CategoryName}</td>;
};