材料表如何做汇总行？reactjs

import React, { Component } from 'react';

class MaterialTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      materials: [
        { name: '材料1', quantity: 10, price: 5 },
        { name: '材料2', quantity: 5, price: 8 },
        { name: '材料3', quantity: 3, price: 12 }
      ]
    };
  }

  render() {
    const { materials } = this.state;

    // 计算汇总行的数据
    const totalQuantity = materials.reduce((total, material) => total + material.quantity, 0);
    const totalPrice = materials.reduce((total, material) => total + (material.quantity * material.price), 0);

    return (
      <table>
        <thead>
          <tr>
            <th>材料名称</th>
            <th>数量</th>
            <th>单价</th>
          </tr>
        </thead>
        <tbody>
          {materials.map((material, index) => (
            <tr key={index}>
              <td>{material.name}</td>
              <td>{material.quantity}</td>
              <td>{material.price}</td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td>汇总</td>
            <td>{totalQuantity}</td>
            <td>{totalPrice}</td>
          </tr>
        </tfoot>
      </table>
    );
  }
}

export default MaterialTable;