Commit 57b10875 authored by Matt 高萌's avatar Matt 高萌

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

parent 34a8556a
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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",
......
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;
......@@ -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"
}
},
......
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']}>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment