[新增]新增井字棋世间旅行

src/index.js

@@ -37,45 +37,16 @@ const Square = (props) => {
 }
 
 class Board extends React.Component {
-  // 类组件es6的constructor钩子函数
-  constructor (props) {
-    super(props);
-    this.state = {
-      squares: Array(9).fill(null),
-      xInNext: true
-    }
-  }
-  // 定一个一个组件方法
-  handleClick(i) {
-    // Array.slice()返回数组选定的元素,相当于克隆了原有数组
-    const squares = this.state.squares.slice()
-    if(calculateWinner(squares) || squares[i]) {
-      return
-    }
-    squares[i] = this.state.xInNext ? 'X': 'O'
-    this.setState({
-      squares,
-      xInNext: !this.state.xInNext
-    })
-  }
   // 小方格方法
   renderSquare(i) {
     return <Square
-      value={this.state.squares[i]}
+      value={this.props.squares[i]}
-      onSquare={()=>this.handleClick(i)}
+      onSquare={()=>this.props.onBoard(i)}
     />;
   }
   render() {
-    const winner = calculateWinner(this.state.squares)
-    let status;
-    if (winner) {
-      status = '恭喜选手' + winner + '获胜~'
-    }else{
-      status = '下一位选手: ' + (this.state.xInNext ? 'X': 'O');
-    }
     return (
       <div>
-        <div className="status">{status}</div>
         <div className="board-row">
           {this.renderSquare(0)}
           {this.renderSquare(1)}
@@ -97,15 +68,67 @@ class Board extends React.Component {
 }
 
 class Game extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      history: [{
+        squares: Array(9).fill(null)
+      }],
+      xIsNext: true,
+      stepIndex: 0
+    }
+  }
+  // 定一个一个组件方法
+  handleClick(i) {
+    const history = this.state.history.slice(0, this.state.stepIndex + 1)
+    const current = history[history.length - 1]
+    const squares = current.squares.slice()
+    if(calculateWinner(squares) || squares[i]){
+      return
+    }
+    squares[i] = this.state.xInNext ? 'X': 'O'
+    this.setState({
+      history: history.concat([{ squares }]),
+      xInNext: !this.state.xInNext,
+      stepIndex: history.length
+    })
+    // Array.slice()返回数组选定的元素,相当于克隆了原有数组
+  }
+  jumpTo(index){
+    this.setState({
+      stepIndex: index,
+      xIsNext: (index % 2) === 0,
+    })
+  }
   render() {
+    const history = this.state.history
+    const current = history[this.state.stepIndex]
+    const winner = calculateWinner(current.squares)
+    const moves = history.map((stepArr, index) => {
+      const desc = index ? '下一步' + index : '开始游戏'
+      return(
+        <li key={index}>
+          <button onClick={()=> this.jumpTo(index)}>{desc}</button>
+        </li>
+      )
+    })
+    let status;
+    if(winner){
+      status = '恭喜选手' + winner + '获胜~'
+    }else{
+      status = '下一位选手: ' + (this.state.xInNext ? 'X': 'O');
+    }
     return (
       <div className="game">
         <div className="game-board">
-          <Board />
+          <Board
+            squares={current.squares}
+            onBoard={(i) => this.handleClick(i)}
+          />
         </div>
         <div className="game-info">
-          <div>{/* status */}</div>
+          <div>{status}</div>
-          <ol>{/* TODO */}</ol>
+          <ol>{moves}</ol>
         </div>
       </div>
     );