使用 react-virtualized 在网格中显示 JSON 个对象列表

Question

如何在网格中显示具有反应虚拟化的对象列表。

在文档中，它展示了如何迭代 cellRenderer 函数，但我想迭代 JSON 个对象。

cellRenderer ({ columnIndex, key, rowIndex, style }) {
   return (
     <div
       key={key}
       style={style}>
       {this.state.list[rowIndex][columnIndex]}
     </div>)
}

// in render()

<Grid
      cellRenderer={this.cellRenderer}
      columnCount={list[0].length}
      columnWidth={100}
      height={200}
      rowCount={list.length}
      rowHeight={30}
      width={1000}
/>

如何调整此函数以显示 JSON 个对象而不是字符串列表？

使用 react-virtualized 中的示例，我能够显示字符串数组的数组，我已经有一个显示数据对象的 Table，我希望它可以滚动而不会损失性能。所以对我来说，react-virtualized 是最知名的选择。

但是是否有另一种方式来显示自定义内容（例如：JSON 通过 react-virtualized 库的对象）？

我一直懒于提出我的解决方案，即使用 react-virtualized 滚动功能将我的 Data-table 显示为一个单元格列，而无需重新定义它。

Answer 1

在不重写整个呈现设计的情况下享受可滚动网格的好处的一种方法是在 cellRenderer 中呈现从另一种方法生成的 DataTable：

cellRenderer ({ columnIndex, key, rowIndex, style }) {
  const {
    myWideDataTable
  } = this.state

  return (
    <div
      {myWideDataTable}
    </div>)
}

// in render()

<Grid
  cellRenderer={this.cellRenderer}
  columnCount={1}
  columnWidth={1000}
  height={1000}
  rowCount={1}
  rowHeight={30}
  width={1000}
/>

希望这对某人有所帮助。

使用 react-virtualized 在网格中显示 JSON 个对象列表

Display JSON objects list in a Grid with react-virtualized

json

reactjs

datatable

react-virtualized