材料表如何做汇总行？reactjs

在ReactJS中，可以使用组件的状态（state）来实现材料表的汇总行。以下是一个示例的实现方法：

创建一个材料表组件（MaterialTable），该组件包含一个表格和一个汇总行。
在组件的状态中，定义一个数组（materials）来存储所有的材料数据。
在组件的渲染方法中，使用.map()方法遍历材料数据数组，生成表格的行。
在渲染方法中，使用.reduce()方法对材料数据数组进行汇总计算，生成汇总行的数据。
在渲染方法中，将表格的行和汇总行一起渲染到页面上。

以下是一个简单的示例代码：

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;

在这个示例中，我们使用了React的组件和状态来实现材料表的汇总行。通过使用.map()方法遍历材料数据数组，我们生成了表格的行。然后，通过使用.reduce()方法对材料数据数组进行汇总计算，我们生成了汇总行的数据。最后，我们将表格的行和汇总行一起渲染到页面上。

请注意，这只是一个简单的示例，实际的材料表可能包含更多的列和更复杂的计算逻辑。根据具体的需求，您可能需要对示例代码进行修改和扩展。