1.Test/xiangminmin/react/syudy4/src/components/2_Table.jsx

import { Component } from "react";
import "./2_Table.css"
class Table extends Component{
    state = {
        date:[
            {
                score:[70,60,30],
                bonus:300,
                name:"小明"
            },
            {
                score:[90,160,80],
                bonus:500,
                name:"小栗"
            },
            {
                score:[60,95,95],
                bonus:200,
                name:"小红"
            },
            {
                score:[100,100,100],
                bonus:400,
                name:"小白"
            }
        ]
    };

    // 数据根据奖金降序排列
    sortDate(){
        return this.state.date.sort((a,b)=>b.bonus-a.bonus)
    }
    // 渲染内容
    newTable(){
        var newDate = this.sortDate()

        return newDate.map((item,index)=>{
            return (
                <tr key={index}>
                    <td>{index+1}</td>
                    <td>{item.name}</td>
                    {item.score.map((item,index) => <td key={index}>{item}</td>)}
                     {/* reduce 数据的累加或累减
                         第一个参数：总数=>total
                         第二个参数：当前元素=>currentValue
                    */}
                    <td>{item.score.reduce((c,d)=> c+d)}</td>
                    <td>{item.bonus}</td>
                </tr>
            )
        })
    }
    render(){
        return (
            <div>
                <table className="table">
                    <thead>
                        <tr>
                            <th>名次</th>
                            <th>名字</th>
                            <th colSpan={3}>分 数</th>
                            <th>总分</th>
                            <th>奖金</th>
                        </tr>
                        {this.newTable()}
                        <tr>
                            <td colSpan={6}>奖金总计</td>
                            <td>{this.state.date.reduce((x,y)=> x+y.bonus,0)}</td>
                        </tr>
                    </thead>
                    <tbody>
                        {/* <tr>
                            <td>第一名</td>
                            <td>best</td>
                            <td>98</td>
                            <td>76</td>
                            <td>88</td>
                            <td>262</td>
                            <td>500</td>
                        </tr> */}
                    </tbody>
                </table>
            </div>
        )
    }
}
export default Table;