react实现井字棋

接上一篇文章，用vscode开发react项目，实现官网中的示例
在vscode中通过脚手架搭建项目，打开如下图：

此次我们只会用到index.css文件和index.js文件：
css使我们的样式文件，用来构建井字棋盘：

body {font: 14px "Century Gothic", Futura, sans-serif;margin: 20px;}ol, ul {padding-left: 30px;}.board-row:after {clear: both;content: "";display: table;}.status {margin-bottom: 10px;}.square {background: #fff;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: 50px;height: 50px;}.square:focus {outline: none;}.kbd-navigation .square:focus {background: #ddd;}.game {display: flex;flex-direction: row;}.game-info {margin-left: 20px;}

js文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';//squar组件渲染了一个单独的button(子组件)
// class Square extends React.Component {
//     // constructor(props){
//     //     super(props);  //定义子类的构造函数是都要调用super函数，在所有含有构造函数的react组件中，构造函数必须以super(props)开头
//     //     this.state = {
//     //         value:null,
//     //     }
//     // }
//     render() {
//       return (
//         
//          className="square" 
//          onClick = {()=>this.props.onClick()}
//         >  
//          {this.props.value}
//         
//       );
//     }
//   }function Square(props){return (<button className='square' onClick={props.onClick}>{props.value}</button>);}//board组件渲染了9个方块(父组件)class Board extends React.Component {//   constructor(props){    //构造函数//       super(props);     //           this.state={//             squares:Array(9).fill(null),   //             xIsNext:true,   //       };//   }// handleClick(i){//     const squares = this.state.squares.slice();  //slice()方法可从已有的数组中返回选定的元素//     if(calculateWinner(squares)||squares[i]){//         return;//     }//     squares[i]=this.state.xIsNext?'X':'O';//     this.setState({//     squares:squares,//     xIsNext:!this.state.xIsNext// });// }renderSquare(i) {return(<Square value ={this.props.squares[i]}onClick ={()=> this.props.onClick(i)}//   onClick ={()=> this.handleClick(i)}/>);}render() {//   const history = this.state.history;//   const current= history[history.length-1];//   const winner = calculateWinner(current.squares);  //获取历史记录中的最新一次记录确定并展示游戏状态//   let status;//   if(winner){//       status = '赢家为：'+winner;//   }else{//     status = '下一步执行者:'+(this.state.xIsNext?'X':'O');//   }return (<div>{/* {status} */}<div className="board-row">{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div><div className="board-row">{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div><div className="board-row">{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div></div>);}}//game组件渲染了含有默认值的一个棋盘,爷爷组件class Game extends React.Component {constructor(props){super(props);this.state={history:[{squares:Array(9).fill(null),}],stepNumber:0,  //当前正在查看那一项历史记录xIsNext:true,};}handleClick(i){const history = this.state.history.slice(0,this.state.stepNumber+1);const current = history[history.length - 1];const squares = current.squares.slice();  //slice()方法可从已有的数组中返回选定的元素if(calculateWinner(squares)||squares[i]){return;}squares[i]=this.state.xIsNext?'X':'O';this.setState({history:history.concat([{    // concat() 方法用于连接两个或多个数组。squares:squares,}]),stepNumber:history.length,xIsNext:!this.state.xIsNext,});}jumpTo(step){this.setState({stepNumber:step,xIsNext:(step%2)===0, //step为偶数时，xIsNext的状态设为true});}render() {const history = this.state.history;const current = history[this.state.stepNumber];const winner = calculateWinner(current.squares);const moves = history.map((step,move)=>{const desc = move ?'Go to move #'+ move:'Go to game start';return (<li key={move}><button onClick = {()=>this.jumpTo(move)}>{desc}</button></li>);});let status;if (winner) {status = 'Winner: ' + winner;} else {status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');}return (<div className="game"><div className="game-board"><Board squares ={current.squares}onClick = {(i)=>this.handleClick(i)}/></div><div className="game-info"><div>{status}</div><ol>{moves}</ol></div></div>);}}// ========================================ReactDOM.render(<Game />,document.getElementById('root'));function calculateWinner(squares) {const lines = [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6],];for (let i = 0; i < lines.length; i++) {const [a, b, c] = lines[i];if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {return squares[a];}}return null;}

效果图：

到这基本结束了，但是革命尚未成功，同志任需努力！（建议自己跟着官网走一遍：地址 https://zh-hans.reactjs.org/tutorial/tutorial.html#overview）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！