时间戳

首页 > 解决方案 > 将剑道网格设置数组项反应为列字段

reactjs - 将剑道网格设置数组项反应为列字段

问题描述

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

示例： 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"
}]

我试着像这样在反应剑道网格中读取这个值，但没有运气。我做错了什么？

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

标签： reactjskendo-uikendo-gridkendo-react-ui

解决方案

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

列定义：

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

自定义单元格：

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

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

推荐阅读