从对象列表中逐行渲染表格答案

【问题标题】：Render table row by key from list of objects从对象列表中逐行渲染表格
【发布时间】：2019-04-01 06:41:09
【问题描述】：

我正在尝试将我的数据绑定到 blueprint.js Table ，但是文档不清楚如何执行此操作。如何为 blueprint.js Table 创建自定义渲染函数以渲染对象列表中的键？

在示例中，rowIndex 默认传递。

代码：

data = [
  { name: "L/S", col2: "abc" }, 
  { name: "HY", col2: "def" }
];

myRender = (rowIndex: number, key: string) => {
  return <Cell> {this.data[rowIndex][key]} </Cell>;
};

<Table numRows={2}>
  <Column name="not-working" cellRenderer={this.myRender("name")} />
  <Column name="not-working2" cellRenderer={this.myRender("col2")} />
</Table>;

错误：

TypeError
Cannot read property 'undefined' of undefined

  18 | 
  19 | myRender = (rowIndex: number, key: string) => {
> 20 |   return <Cell> {this.data[rowIndex][key]} </Cell>;
     |                                     ^
  21 | };

请参见此处的示例： https://codesandbox.io/s/k9l9q2150r

文档： https://blueprintjs.com/docs/#table.basic-usage

【问题讨论】：

标签： javascript reactjs blueprintjs

【解决方案1】：

cellRenderer 需要一个将rowIndex 作为参数的函数。所以这就是你需要做的：

myRender = (key: string) => (rowIndex: number) => {
  return <Cell>{this.data[rowIndex][key]}</Cell>;
};

这是sandbox

【讨论】：