Question

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

卡片和
列表（表）。

我正在对列表视图选项使用react-virtualized。问题是，当数据类型为数字时，我需要更改获取的服务器端数据的格式。我已经在卡片视图选项中做到了。例如，这是我的ItemCard组件：

<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>

我在ItemList组件中使用的

是这样的：

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

我应该如何对像这样的react-virtualized表做完全相同的事情：

<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}
    />

如何更改类型为字符串的“库存”和“ UnitPrice”服务器端数据的格式？

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}
/>

在反应虚拟化表中更改服务器端数据的格式

1 个答案: