function Square (props) {
return (
<button
className="square"
onClick= {props.onClick}>
{props.value}
</button>
);
}
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();
// 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)}
/>
);
}
render() {
// const winner =calculateWinner(this.state.squares);
// let status;
// if(winner){
// status ='winner' + winner;
// }else{
// status = '下一手'+ (this.state.xIsNext ? 'X' :'O')
// }
return (
<div>
<div className="status">{this.props.status+"=="}</div>
<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>
);
}
}
class Game extends React.Component {
constructor(props){
super(props);
this.state ={
history :[{
squares :Array(9).fill(null),
location:null,
}],
stepNumber :0,
xIsNext :true,
}
}
handleClick(i){
const history =this.state.history;
const current =history [history.length-1];
const squares =current.squares.slice();
if (calculateWinner(squares)||squares[i]){
return;
}
squares[i]= this.state.xIsNext ?'X' : 'O';
this.setState({
history :history.concat([{
squares :squares,
location :i
}]),
stepNumber :history.length,
xIsNext :!this.state.xIsNext,
});
}
jumpTo(step){
this.setState({
stepNumber :step,
});
}
render() {
const history =this.state.history;
const current =history[this.state.stepNumber];
const stepNumber=this.state.stepNumber;
const winner =calculateWinner(current.squares);
const moves =history.map((step,move)=>{
var i=step.location;
var x=Math.floor(i/3+1);
var y=i%3+1
const desc =move ? '第'+move+'手'+(move%2 ==1?'X':'Y')+'落子在'+x+'行'+y+'列' :
'Go to game start';
// console.log(stepNumber+"=="+move)
return (
console.log(stepNumber==move),
<li key={move} >
<button onClick ={() => this.jumpTo(move)}
className ={{move}=={stepNumber}?"weight":""}
>{desc}{stepNumber}{move}</button>
</li>
);
});
let status;
if(winner){
status = winner+ '赢了';
}else{
status = '下一手'+(this.state.xIsNext ?'X' :'O');
}
return (
<div className="game">
<div className="game-board">
<Board
squares ={current.squares}
onClick ={(i)=>this.handleClick(i)}
status ={status}
/>
</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;
}
react官方那个入门demo当前选中的记录加粗怎么做
shibowen
#1
lcoder
#2
哇，第一次发帖！欢迎来到react中文社区。
加粗，要么用style要么用className。我看了下你的代码
className={{ move } == { stepNumber } ? "weight" : ""}
用 条件（三元）运算符就可以了。完整的应该是
className={ move==stepNumber ? "weight" : ""}
建议代码格式化，用markdown的```代码块书写
