reactjs - React kendo grid将数组项设置为列字段

Question

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

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

它与类别 block 一起工作正常

<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 剑道网格中读取这个值，但没有运气。我犯了什么错误？

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

Answer 1

您可以将该列绑定(bind)到“类别”字段，并定义用于呈现数组中第一项的自定义单元格组件。请检查下面的示例:

列定义:

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

自定义单元格:

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

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