reactjs - 在 react-admin 中显示网格列值的总数

Question

在 react-admin 我有一个显示余额列表的页面，它看起来像这样:

// extra code not included
export const BalanceList = props => (
  <List filters={<BalanceFilter/>} actions={<BalanceActions/>} {...props} perPage={-1}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <DateField source="date" />
      <ReferenceField source="account_id" reference="accounts">
        <TextField source="name"/>
      </ReferenceField>
      <TextField source="currency.name" label="Currency" />
      <TextField source="currency.symbol" label="Symbol" />
      <NumberField source="used" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="free" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total_value" options={{ maximumFractionDigits: 2 }} />
    </Datagrid>
  </List>
);

我想最后在列表和分页之间显示一行。或者如果更容易实现，也可以在列表组件内。

该行应显示使用金额、费用金额等的总和来计算这些，它应该简单地将相关列的所有值相加。例如。 total_value 应该是所有“total_value”行的总和。

我是 react 和 react-admin 的新手，不知道如何实现这一点。请在您的答案中提供一些代码，谢谢。

更新 : 我试过用 aside component :

const Aside = ({ data, ids })  => (
  <div style={{ width: 200, margin: '1em' }}>
    <Typography variant="title">Post details</Typography>
    <Typography variant="body1">
      Total value: {ids.map(id => data[id]).reduce((sum, balance) => sum + balance.total_value)}
    </Typography>
  </div>
);

export const BalanceList = props => (
  <List aside={<Aside />} filters={<BalanceFilter/>} actions={<BalanceActions/>} {...props} perPage={-1}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <DateField source="date" />
      <ReferenceField source="account_id" reference="accounts">
        <TextField source="name"/>
      </ReferenceField>
      <TextField source="currency.name" label="Currency" />
      <TextField source="currency.symbol" label="Symbol" />
      <NumberField source="used" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="free" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total" options={{ maximumFractionDigits: 4 }} />
      <NumberField source="total_value" options={{ maximumFractionDigits: 2 }} />
    </Datagrid>
  </List>
);

但不知为何， reduce函数提示它不能应用于空数组。为什么是空的？ data应该是传递给 DataGrid 的相同数组...

Answer 1

您可以使用组件 FunctionField:
https://marmelab.com/react-admin/Fields.html#functionfield

import { FunctionField } from 'react-admin'

<FunctionField
  label="Total Value"
  render={record => `${record.total_value + record.total_XXX + ...}`}
/>