如何向元素添加新类?

Question

通过 https://reactjs.org/tutorial/tutorial.html#wrapping-up 中的基本教程，对于问题5

5. When someone wins, highlight the three squares that caused the win.

我希望添加一个新类来突出显示正方形。

在class Game，render()，

...
if(winner){
status = 'Winner: '+ winner;
} else{
status = 'Next player: '+ (this.state.xIsNext ? 'X' : 'O');
}
...

我补充说：

if(winner){
status = 'Winner: '+ winner;
this.highlight_win(this.state.positions);  <----- Added this line
} else{
status = 'Next player: '+ (this.state.xIsNext ? 'X' : 'O');
}

以及：

highlight_win(positions){
console.log(positions);
return;
}

如何使highlight_win()使用特定键<Square>按钮添加新类？我想传递的参数可能不正确。

[编辑]

我已经把我的代码放在 https://github.com/maan81/reactjs

Answer 1

1. highlight_win应该通过更改父(祖先(控件中的 props 或更改给定控件的状态来触发重新渲染

2. 必须有一个属性(处于给定控件的状态或来自父控件的 props(，您可以从中推断出元素的类名

3. 在控件的render方法中，您需要检查该属性并从中计算类名，并将其用作Square组件中某处className属性

Answer 2

我认为这就是你需要的。运行代码片段并告诉我我是否正确？:)我所做的是我创建了一个具有绿色属性backgroundCSS类，并在某个条件最终被true时动态显示它，换句话说，如果我们有一个赢家。只要该条件为 false，就不会应用任何类。

{props.winning ? 'winning-square' : ''}

function Square(props) {   
return (
<button className={`square ${props.winning ? 'winning-square' : ''}`} onClick={() => props.onClick()}>
{ props.value }
</button>
);
}
class Board extends React.Component {

renderSquare(i, winning) {
return <Square key={i} value={this.props.squares[i]} onClick={() => this.props.onClick(i)} winning={winning}/>;
}

render() {
let rows = [];
let squares = [];
for (var row=0; row<3; row++) {
for (var index=row*3; index<row*3+3; index++) {

let winning = false;
const winningLine = this.props.winningLine;
if (winningLine) {
for (var i=0; i<winningLine.length; i++) {
if (winningLine[i] == index)
winning = true;
}
}

squares.push(this.renderSquare(index, winning));
}    
rows.push(<div key={row} className="board-row">{squares}</div>);
squares = [];
}

return <div> {rows} </div>;

}
}
class Game extends React.Component {
constructor() {
super();
this.state = {
history: [{
squares: Array(9).fill(null)
}],
xIsNext: true,
stepNumber: 0
};
}
handleClick(i) {

const history = this.state.history.slice(0, this.state.stepNumber + 1);

const newest = history[history.length - 1];
const newestSquares = newest.squares.slice();

if (calculateWinner(newestSquares) || newestSquares[i]) {
return;
}

const current = history[this.state.stepNumber];
const squares = current.squares.slice();

if (calculateWinner(squares) || squares[i]) {
return;
}
const sign = this.state.xIsNext ? 'X' : '0';
squares[i] = sign;

this.setState({
history: history.concat([{
squares: squares,
selected: {
row: i % 3 + 1,
col: Math.floor(i / 3) + 1,
sign: sign
},
}]),
xIsNext: !this.state.xIsNext,
stepNumber: history.length,
});

}

jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) ? false : true,
});  
}

render() {

const history = this.state.history;
const stepNumber = this.state.stepNumber;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);

let status;
let winningLine;
if (winner) {
status = 'Winner: ' + winner.sign;
winningLine = winner.line;
} else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : '0');
}

const moves = history.map((step, move) => {            

const desc = move ? 
'Move ' + step.selected.sign + ' (' + step.selected.row + ',' + step.selected.col + ')':
'Game start';

const currentlySelected = (move == stepNumber);

return (
<li key={move}>
<a href="#" onClick={() => this.jumpTo(move)} className={currentlySelected ? 'selectedMove' : ''}>
{desc}
</a>
</li>
);      
});

return (
<div className="game">
<div className="game-board">
<Board squares={current.squares} winningLine={winningLine} onClick={(i) => this.handleClick(i)} />
</div>
<div className="game-info">
<div>{status}</div>
<ul>{moves}</ul>
</div>
</div>
);
}
}
ReactDOM.render(
<Game />,
document.getElementById('container')
);
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 {
sign: squares[a],
line: lines[i]
}
}
}
return null;
}

body {
font: 14px "Cursive", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
li a.selectedMove {
font-weight: bold;
}
.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: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
ul {
list-style: none;
}
div {
color: green;
font-weight: bold;
letter-spacing: 2px;
}
.winning-square {
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Answer 3

这里有一种方法可以做到这一点：calculateWinner函数具有确定哪些行是赢家所需的内容。只需将获胜symbol和row存储到对象即可。Game的render方法将此结果存储到winner，然后将其传递给<Board />。然后，Board 的renderSquare方法确定winningRow数组(例如：[0,1,2](是否包含i(0,1,2,3,4,5,6,7,8(。如果i是匹配项，它将boolean结果存储到winningSquare，然后传递给<Square />。如果winningSquaretrue，Square的className将从className="square"更改为className="square winner"：

工作示例：https://codesandbox.io/s/pkp7oxrnoj

游戏.js

import React, { Component } from "react";
import Board from "./Board";
import CalcWinner from "./calcWinner";
import ShowHistory from "./showHistory";
export default class Game extends Component {
state = {
history: [
{
squares: Array(9).fill(null)
}
],
stepNumber: 0,
xIsNext: true
};
clearHistory = () => {
this.setState({
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();
if (CalcWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
history: history.concat([
{
squares: squares
}
]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext
});
};
jumpTo = step =>
this.setState({
stepNumber: step,
xIsNext: step % 2 === 0
});
render = () => {
const { history, xIsNext } = this.state;
const current = history[this.state.stepNumber];
const winner = CalcWinner(current.squares);
const status = winner
? `Winner: ${winner.symbol}`
: `Next player: ${xIsNext ? "X" : "O"}`;
return (
<div className="container">
<h1>Tic Tac Toe</h1>
<div className="game">
<div className="game-board">
<Board
winningRow={winner ? winner.row : null}
squares={current.squares}
onClick={i => this.handleClick(i)}
/>
</div>
</div>
<div className="game-info">
<div>{status}</div>
<ShowHistory
clearHistory={this.clearHistory}
history={history}
winner={winner && winner.symbol ? true : false}
jumpTo={this.jumpTo}
/>
</div>
</div>
);
};
}

董事会.js

import React, { PureComponent } from "react";
import Square from "./square";
export default class Board extends PureComponent {
renderSquare = i => {
const { winningRow } = this.props;
const winningSquare = winningRow && winningRow.includes(i) ? true : false;
return (
<Square
winningSquare={winningSquare}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
};
render = () => {
return (
<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>
);
};
}

计算赢家.js

export default 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 { symbol: squares[a], row: [a, b, c] };
}
}
return null;
};

显示历史.js

import map from "lodash/map";
import React from "react";
export default ({ clearHistory, history, jumpTo, winner }) => (
<ol className="history">
{map(history, (step, move) => {
const desc = move ? `Go to move #${move}` : "Go to game start";
return (
<li key={move}>
<button
style={{ width: 185, marginBottom: 10 }}
className="uk-button uk-button-primary uk-button-small"
onClick={() => jumpTo(move)}
>
{desc}
</button>
</li>
);
})}
{winner && (
<button
style={{ width: 185 }}
className="uk-button uk-button-danger uk-button-small"
onClick={clearHistory}
>
Clear Board
</button>
)}
</ol>
);

方形.js

import React from "react";
export default ({ onClick, value, winningSquare }) => (
<button
className={`square ${winningSquare ? "winner" : ""}`}
onClick={onClick}
>
{value}
</button>
);