Я пытаюсь следовать руководству по реакции на их официальном сайте: https://reactjs.org/tutorial/tutorial.html
Единственная разница в том, что я пытаюсь реализовать это, используя только функциональные компоненты, вот мой код на ручке кода:
См. функциональный компонент учебника React Снеддена Гонсалвеса (@ snedden-gonsalves) на CodePen.
Обобщить; У меня есть простой квадратный компонент, который рисует отдельные квадраты, компонент родительской платы, который рисует квадратную доску 3x3, и общий игровой компонент, который поддерживает состояние, такое как история, текущий квадрат, текущий ход и т. Д., Как в учебнике. В настоящее время я отправляю квадраты из родительского игрового компонента в компоненты платы следующим образом:
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1]}
/>
HandleClick создает новое состояние квадратов и добавляет его в массив истории, который, как я полагаю, должен передаваться динамически, поскольку я также передаю последнюю запись в массиве, но не похоже, что он вообще передает последнюю запись дочерним компонентам. Не уверен, что происходит ..
Спасибо за уделенное время.
Компоненты:
Квадрат:
const Square = (props)=>{
return(
<button className="square" onClick={(e)=>props.onClick()}>
{props.value}
</button>
)
}
Доска:
const Board = (props) => {
const renderSquare = (i)=>{
return <Square
value={props.squares[i]}
onClick={() => {
props.onClick(i)
}
}
/>
}
return(
<div>
<div className="board-row">
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className="board-row">
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className="board-row">
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
)
}
Игра:
const Game = () =>{
let [state, setState] = useState({
history:[{
squares:Array(9).fill(null)
}],
isXNext:true,
status:'Next player X'
});
useEffect(() =>{
const currentSquares = state.history[state.history.length - 1].squares;
const winner = calculateWinner(currentSquares);
if(winner){
setState( state => ({...state, status:'Winner is ' + winner, ended:true}));
}
},[state.history]);
const handleClick = (i) =>{
const currentSquares = state.history[state.history.length - 1].squares;
if(state.ended || currentSquares[i])
return;
const newSquares = currentSquares.slice();
newSquares[i] = state.isXNext?'X':'O';
const newIsXNext = !state.isXNext;
const newHistory = state.history.concat([
{squares:newSquares}]);
setState(state => ({...state,
history: newHistory,
isXNext: newIsXNext,
status:'Next player ' + (newIsXNext?'X':'O')
}));
}
return(
<div className="game">
<div className="game-board">
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1]}
/>
</div>
<div className="game-info">
<div>{state.status}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}