study4

react/study4/project/src/App.js

@@ -1,11 +1,13 @@
 import logo from './logo.svg';
 import './App.css';
 import Vase from './components/Vase'
+import Table from './components/Table'
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <Vase/>
+        <Table/>
       </header>
     </div>
   );

react/study4/project/src/components/Table.css

@@ -0,0 +1,9 @@
+.sell {
+    border: 1px solid #eee;
+    margin-top: 30px;
+    border-collapse: collapse;
+
+}
+.sell td,.sell th {
+    border: 1px solid #ccc;
+}

react/study4/project/src/components/Table.jsx

@@ -0,0 +1,89 @@
+import { Component } from "react";
+import "./Table.css";
+class Table extends Component {
+  state = {
+    data: [
+      {
+        score: [80, 590, 100],
+        bonus: 500,
+        name: "zhenbo",
+      },
+      {
+        score: [180, 290, 100],
+        bonus: 100,
+        name: "xMing",
+      },
+      {
+        score: [80, 76, 200],
+        bonus: 200,
+        name: "Lucy",
+      },
+      {
+        score: [50, 90, 60],
+        bonus: 400,
+        name: "LiLi",
+      },
+    ],
+  };
+  sortDate() {
+    // 倒序
+    return this.state.data.sort((a, b) => b.bonus - a.bonus);
+  }
+  newTable() {
+    var data = this.sortDate(this.state.data);
+
+    return data.map((item, index) => {
+      return (
+        <tr key={index}>
+          <td>{index + 1}</td>
+          <td>{item.name}</td>
+          {item.score.map((a, b) => <td key={b}>{a}</td>)}
+          {/* reduce 数据的累加或累减
+                第一个参数：总数=>total
+                第二个参数：当前元素=>currentValue
+           */}
+          <td>{item.score.reduce((c, d) => c + d)}</td>
+          <td>{item.bonus}</td>
+        </tr>
+      );
+    });
+  }
+  render() {
+    return (
+      <div>
+        <table className="sell">
+          <thead>
+            <tr>
+              <th>名次</th>
+              <th>名字</th>
+              <th colSpan={3}>分数</th>
+              {/* <th></th> */}
+              {/* <th></th> */}
+              <th>总分</th>
+              <th>奖金</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* <tr>
+                <td>第一名</td>
+                <td>80</td>
+                <td>90</td>
+                <td>100</td>
+                <td>270</td>
+                <td>200</td>
+            </tr> */}
+
+            {this.newTable()}
+            <tr>
+                <td colSpan={6}>奖金总计</td>
+                <td>
+                    {this.state.data.reduce((a,b)=>a+b.bonus,0)}
+                </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+export default Table;