Reactjs 如何获取react引导表中一列的总数？反应

问题是，我有一个组件，从父亲那里接收道具。问题是，我知道如何获得我得到的信息，但我不能添加一列的总数。我试过用sumby，但我想我没有用它

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { connect } from 'react-redux';
import _ from 'lodash';

const formatName = (cell, row, extra) => {
  let display = 'No disponible'; if (_.get(row, 'name')) { display = `${_.get(row, 'name')}` }
  return (
    <div>
      {display}
    </div>
  )
};
const formatPrice = (cell, row, extra) => {
  let display = 0; if (_.get(row, 'total')) { display = `${_.get(row, 'total')}` }

  return (
    <div>
      {parseFloat(display).toFixed(2)}€
    </div>
  )
};



class ChartInventory extends React.Component {
  state = {
    sortName: 'name',
    sortOrder: 'asc',
  }

  render() {
    const options = {
      sortName: this.state.sortName,
      sortOrder: this.state.sortOrder
    };

    console.log('ANALYTICS ', this.props.analytics)
    return (
      <span>
        <BootstrapTable data={this.props.analytics}
          options={options}
          pagination={this.props.analytics.length > 50}
          trClassName="table-row"
          ref="inventoryAnalyticsTable">
          <TableHeaderColumn isKey={true} dataField='name' headerAlign='center' dataAlign='center' dataFormat={formatName} dataSort>Nombre</TableHeaderColumn>
          <TableHeaderColumn dataField='total' width='100' headerAlign='center' dataAlign='center' dataFormat={formatPrice}>Precio</TableHeaderColumn>
        </BootstrapTable>
        <div style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'flex-end', marginRight: 10 }}>
          <div style={{ fontWeight: 'bold', justifyContent: 'center' }}>
            Precio Total
          </div>
          {_.sumBy(this.props.analytics, 'total').toFixed(2)}€
        </div>
      </span >
    );
  }
}

const mapStateToprops = state => ({
  analytics: state.inventory.analytics,
});

export default connect(mapStateToprops, null)(ChartInventory);

从“React”导入React；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
从'react redux'导入{connect}；
从“lodash”进口；
常量formatName=（单元格、行、额外）=>{
let display='No disposible'；if（{uu.get（行，'name'））{display=`${{uu.get（行，'name'）}
返回(
{display}
)
};
const formatPrice=（单元格、行、额外）=>{
让display=0；如果（u.get（row，'total'））{display=`${uu.get（row，'total'）}}
返回(
{parseFloat（display）.toFixed（2）}
)
};
类ChartInventory.Component{
状态={
sortName:'名称'，
排序器：“asc”，
}
render（）{
常量选项={
sortName:this.state.sortName，
sortOrder:this.state.sortOrder
};
console.log（'ANALYTICS'，this.props.ANALYTICS）
返回(
50}
trClassName=“表行”
ref=“inventoryAnalyticsTable”>
名义
普里西奥
精确总计
{uu.sumBy（this.props.analytics，'total'）.toFixed（2）}
);
}
}
常量mapStateToprops=状态=>({
分析：state.inventory.analytics，
});
导出默认连接（MapStateTops，null）（图表目录）；

在这里你可以看到它

我更喜欢使用页脚，但我不知道如何对“总计”列求和。

---

谢谢。

你会在这里找到你想要的东西（如果你还没有……）：

TL；DR alternative，您可以通过以下方式定义列并添加页脚信息：

const columns = [{
    dataField: 'name',
    text: 'Nombre',
    headerAlign: 'center',
    dataAlign='center',
    dataFormat={formatName},
    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
  }, {
    dataField: 'total',
    text: 'Precio',
    headerAlign: 'center',
    dataAlign='center',
    dataFormat={formatPrice},
    footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
  }];

<BootstrapTable
  keyField="name"
  data={ this.props.analytics }
  columns={ columns }
/>

const列=[{
数据字段：“名称”，
文本：“Nombre”，
标题符号：“中心”，
dataAlign='center'，
dataFormat={formatName}，
页脚：columnData=>columnData.reduce（（acc，项目）=>acc+项目，0）
}, {
数据字段：“总计”，
文本：“Precio”，
标题符号：“中心”，
dataAlign='center'，
dataFormat={formatPrice}，
页脚：columnData=>columnData.reduce（（acc，项目）=>acc+项目，0）
}];

虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-谢谢@Das_Geek，因为我不知道这些政策！而且推理也很有道理。我已经更新了我的答案。