From 001eb197a2e7b3fd3863007f88626486d1b51fb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= Date: Mon, 15 Feb 2021 21:20:16 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=E7=AE=80=E5=8D=95=E7=9A=84?= =?UTF-8?q?=E5=AE=98=E6=96=B9demo=E4=BA=95=E5=AD=97=E6=A3=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/.List.js.swp | Bin 12288 -> 0 bytes src/index.css | 60 ++++++++- src/index.js | 140 ++++++++++++++++++-- {src => 留一个备份的src}/App.css | 0 {src => 留一个备份的src}/App.js | 0 {src => 留一个备份的src}/App.test.js | 0 {src => 留一个备份的src}/List.js | 0 留一个备份的src/index.css | 10 ++ 留一个备份的src/index.js | 17 +++ {src => 留一个备份的src}/logo.svg | 0 {src => 留一个备份的src}/reportWebVitals.js | 0 {src => 留一个备份的src}/setupTests.js | 0 12 files changed, 212 insertions(+), 15 deletions(-) delete mode 100644 src/.List.js.swp rename {src => 留一个备份的src}/App.css (100%) rename {src => 留一个备份的src}/App.js (100%) rename {src => 留一个备份的src}/App.test.js (100%) rename {src => 留一个备份的src}/List.js (100%) create mode 100644 留一个备份的src/index.css create mode 100644 留一个备份的src/index.js rename {src => 留一个备份的src}/logo.svg (100%) rename {src => 留一个备份的src}/reportWebVitals.js (100%) rename {src => 留一个备份的src}/setupTests.js (100%) diff --git a/src/.List.js.swp b/src/.List.js.swp deleted file mode 100644 index 3217881d3f4a456ae8a69b2d255c350f393ac22c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI2&1(}u6u>7QJXw|2i{N35hqM8+wY`XhT-qK4>p}cD+HH1fRyWzWyOBa$O=H@` znzU9bO-ov1z@WV-iV{*o@xSnHc9ICoh2+pRLD&4kIaxP6*Y(}&@hTcX1A8&hMFs~>^;;{Pa2}^U-Iw;V7}lZz zG=K)s02)98XaEhM0W{EI28^(S+<|-E*Szmz&C&7K*qq{k2G9T+Km%w14WI!ufCkV2 z8bAYR01b4Y0Z}64>j6UM;CsLI{lE48|ML(b-+@oS8z2fuz!-297y*U>3iJT`fo}&1 z*#b6zo4^Qg6!;8lzXx6e1t14xfpuUFu>Ly^U_%3F01co4G=K)s02)98XaEiT_XgNx zSk(+Fu?aDv7}PohO~?$P)PmAJ`mEZk6h^0~sjIfLR!^kb0veBA zU5}e{PtBzm&n4>ljEl~A1z4ixw5?QQMnntIUI=I`Br&bGk4_Q4BI>%mBa}@Va9yVt ztYhn*p@6JNkO({vCQ zg3ecSm12o+-ZRq+)s@Fz-lbq0d3J-}U8v7LtP~TK(*5f5(#L4bE;3W|(D|d6wQ`xy trp-c(=L=9|zMAFPWNjx8-Apf this.props.onSquare()} +// > +// {this.props.value} +// +// ); +// } +// } + +// 函数组件 +const Square = (props) => { + return ( + + ) +} + +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 this.handleClick(i)} + />; + } + render() { + const winner = calculateWinner(this.state.squares) + let status; + if (winner) { + status = '恭喜选手' + winner + '获胜~' + }else{ + status = '下一位选手: ' + (this.state.xInNext ? 'X': 'O'); + } + return ( +
+
{status}
+
+ {this.renderSquare(0)} + {this.renderSquare(1)} + {this.renderSquare(2)} +
+
+ {this.renderSquare(3)} + {this.renderSquare(4)} + {this.renderSquare(5)} +
+
+ {this.renderSquare(6)} + {this.renderSquare(7)} + {this.renderSquare(8)} +
+
+ ); + } +} + +class Game extends React.Component { + render() { + return ( +
+
+ +
+
+
{/* status */}
+
    {/* TODO */}
+
+
+ ); + } +} + +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; +} ReactDOM.render( - - - , + , document.getElementById('root') ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/App.css b/留一个备份的src/App.css similarity index 100% rename from src/App.css rename to 留一个备份的src/App.css diff --git a/src/App.js b/留一个备份的src/App.js similarity index 100% rename from src/App.js rename to 留一个备份的src/App.js diff --git a/src/App.test.js b/留一个备份的src/App.test.js similarity index 100% rename from src/App.test.js rename to 留一个备份的src/App.test.js diff --git a/src/List.js b/留一个备份的src/List.js similarity index 100% rename from src/List.js rename to 留一个备份的src/List.js diff --git a/留一个备份的src/index.css b/留一个备份的src/index.css new file mode 100644 index 0000000..a9945fc --- /dev/null +++ b/留一个备份的src/index.css @@ -0,0 +1,10 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} diff --git a/留一个备份的src/index.js b/留一个备份的src/index.js new file mode 100644 index 0000000..ef2edf8 --- /dev/null +++ b/留一个备份的src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/logo.svg b/留一个备份的src/logo.svg similarity index 100% rename from src/logo.svg rename to 留一个备份的src/logo.svg diff --git a/src/reportWebVitals.js b/留一个备份的src/reportWebVitals.js similarity index 100% rename from src/reportWebVitals.js rename to 留一个备份的src/reportWebVitals.js diff --git a/src/setupTests.js b/留一个备份的src/setupTests.js similarity index 100% rename from src/setupTests.js rename to 留一个备份的src/setupTests.js