分离出组件并增加颜色点击变化

package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "dva": "^2.4.1",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "styled-components": "^4.3.2"
   },
   "devDependencies": {
     "babel-plugin-dva-hmr": "^0.3.2",

src/components/Square/index.js

+import React from "react"
+import styled from "styled-components"
+
+
+const SquareButton = styled.button`
+    background: ${(props) => props.backgroundColor};
+    border: 1px solid #999;
+    float: left;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 34px;
+    height: 34px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding: 0;
+    text-align: center;
+    width: 34px;
+    `
+function Square(props) {
+  return (
+    <SquareButton backgroundColor={props.value ? (props.value === "X" ? "blue" : "red") : "#fff"} onClick={props.onClick}>
+      {props.value}
+    </SquareButton>
+  );
+}
+
+export default Square;

src/models/ticTacToe.js

@@ -7,7 +7,8 @@ export default {
       }
     ],
     stepNumber: 0,
-    xIsNext: true
+    xIsNext: true,
+    backgroundColor: null
   },
 
   reducers: {
@@ -21,7 +22,8 @@ export default {
       return {
         history: history.concat([{ squares: squares }]),
         stepNumber: history.length,
-        xIsNext: !state.xIsNext
+        xIsNext: !state.xIsNext,
+        backgroundColor: state.xIsNext ? "blue" : "red"
       }
     },
 

src/routes/TicTacToe/index.jsx

 import React from 'react';
 import { connect } from 'dva';
 import styles from "./index.css";
-
-
-function Square(props) {
-  return (
-    <button className={styles.square} onClick={props.onClick}>
-      {props.value}
-    </button>
-  );
-}
+import Square from "../../components/Square"
 
 
 function calculateWinner(squares) {
@@ -89,7 +81,7 @@ class TicTacToe extends React.Component {
       <div className={styles.game}>
         <div className={styles['game-board']}>
           {squares.map((item, key) => (
-            <Square key={key} index={key} value={item} onClick={() => this.nextStep(key)} />
+            <Square key={key} backgroundColor={ticTacToe.backgroundColor} value={item} onClick={() => this.nextStep(key)} />
           ))}
         </div>
         <div className={styles['game-info']}>