javascript - 从对象列表按键渲染表

我正在尝试将数据绑定(bind)到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

最佳答案

cellRenderer需要一个以rowIndex作为参数的函数。所以这是您需要做的:

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

这是sandbox