如何使用 react-admin 为数字字段设置自定义值

如何解决如何使用 react-admin 为数字字段设置自定义值

我有一个包含 totalPrice 和 saleCommission 字段的记录。

我使用 NumberField 正确显示价格：

const RideShow: FC<ShowProps> = (props) => (
  <Show
    {...props}
  >
    <SimpleShowLayout>
      <NumberField
        source="totalPrice"
        label="Prix total"
        locales={['fr']}
        options={{
          style: 'currency',currency: 'EUR',}}
      />
    </SimpleShowLayout>
  </Show>
);

现在我想显示减去销售佣金的价格，这是我从 API 中没有的数据。

我发现的唯一方法是create a custom field， 但我必须复制/粘贴几乎所有 NumberField 的逻辑：

const WithoutCommissionPriceField: FC<FieldProps<RideRecord>> = ({ record }) => {
  if (!record) {
    return null;
  }

  const price = record.totalPrice - record.totalPrice * record.saleCommission;

  return (
    <Typography
      variant="body2"
      component="span"
    >
      {price.toLocaleString('fr',{
        style: 'currency',})}
    </Typography>
  );
};

它有效，但我唯一需要的是自定义价格值。

如何通过直接使用带有自定义值的 NumberField 来避免代码重复？

更新：我找到了一种重新使用 NumberField 的方法：

const WithoutCommissionPriceField: FC<FieldProps<RideRecord>> = ({ record,...props }) => {
  if (!record) {
    return null;
  }

  record.totalPriceWithoutCommission = record.totalPrice - record.totalPrice * record.saleCommission;

  return (
    <NumberField
      record={record}
      source="totalPriceWithoutCommission"
      locales={['fr']}
      options={{
        style: 'currency',}}
      {...props}
    />
  );
};

但是我必须更改记录内容的方式对我来说仍然有点笨拙。