更改 act-virtualized 表中服务器端数据的格式

Question

我正在制作一个具有两个视图选项的 React 应用程序：

1. 卡片和
2. 列表(表(。

我正在使用反应虚拟化作为列表视图选项。问题是我需要更改数据类型为 number 时获取的服务器端数据的格式。我已经在卡片视图选项中完成了此操作。例如，这是我的条目卡组件：

<div className="container">
  <div>{id}</div>
  <div>{name}</div>
  <div>{parseFloat(inventory).toFixed(2).toString().replace(/B(?=(d{3})+(?!d))/g, ",")}</div>
  <div>{parseFloat(unitprice).toFixed(2)}</div>
</div>

我在项目列表组件中使用，如下所示：

beautifiedData.map((product, i) => {
  return ( 
    <ItemCard
      key={i}
      id={item.No}
      name={item.name}
      inventory={item.Inventory}
      unitprice={item.UnitPrice}
    />
   )
 })

我应该如何对反应虚拟化表做完全相同的事情，如下所示：

<Table className="items-table"
    width={1300}
    height={400}
    headerHeight={20}
    rowHeight={30}
    rowCount={list.length}
    rowGetter={({ index }) => list[index]}
    sortBy={this.state.sortBy}
    sortDirection={this.state.sortDirection}
    sort={this.sort}
>
    <Column
      label={content[langProp].ID}
      dataKey= 'No'
      width={150}
    />
    <Column
      label={content[langProp].Name}
      dataKey= 'Name'
      width={150}
    />
    <Column
      label={content[langProp].Inventory}
      dataKey= 'Inventory'
      width={150}
    />
    <Column
      label={content[langProp].UnitPrice}
      dataKey= 'UnitPrice'
      width={150}
    />

如何更改类型为字符串的"库存"和"单价"服务器端数据的格式？

Answer 1

我找到了一个解决方案，我像这样使用 cellDataGetter：

<Column
  label={content[langProp].Inventory}
  cellDataGetter={({ rowData }) => parseFloat(rowData.Inventory).toFixed(2).toString().replace(/B(?=(d{3})+(?!d))/g, ",")}
  dataKey='Inventory'
  width={150}
/>