React - прохождение обработчиков событий, которые нуждаются в аргументах в качестве реквизита для дочерних компонентов ⇐ Javascript

[Anonymous]

Я новичок в реагировании, поэтому, когда я закончил учебник Tic-Tac-Toe из документации, я начал делать проблемы, чтобы улучшить игру и практику. Я застрял во втором вызове:
"2. Переписать доску для использования двух циклов для создания квадратов вместо их жесткой кодирования."
Это был компонент доски, прежде чем я начал вызов.function Board({xIsNext, squares, onPlay}) {

function handleClick(i) {
if (squares || calculateWinner(squares)) return;

const nextSquares = squares.slice();
xIsNext ? (nextSquares = "X") : (nextSquares = "O");
onPlay(nextSquares)
}

const winner = calculateWinner(squares);
let status;
status = winner ? "Winner: "+winner : "Next player: "+(xIsNext ? "X" : "O");

return (

{status}

handleClick(0)} />
handleClick(1)} />
handleClick(2)} />

handleClick(3)} />
handleClick(4)} />
handleClick(5)} />

handleClick(6)} />
handleClick(7)} />
handleClick(8)} />


);
}
< /code>
Просмотр шаблона, который был в повторении строк и квадратов, я переписал код в это. < /p>
function Board({xIsNext, squares, onPlay}) {

function handleClick(i) {
if (squares || calculateWinner(squares)) return;

const nextSquares = squares.slice();
xIsNext ? (nextSquares = "X") : (nextSquares = "O");
onPlay(nextSquares)
}

const squareComponents = []
const rowComponents = []

for (i = 0; i < 9; i++) {
squareComponents.push( handleClick(i)}/>);
}

for (i = 0; i < 3; i++) {
rowComponents.push(

{squareComponents.splice(0,3)}

)
}

const winner = calculateWinner(squares);
let status;
status = winner ? "Winner: "+winner : "Next player: "+(xIsNext ? "X" : "O");

return (

{status}
{rowComponents}

);
}
< /code>
Страница рендерирует, но когда вы щелкнуте на любой из квадратов на доске, «X» появляется только на четвертом квадрате. Как будто все обработчики кликов квадратных компонентов ссылаются на четвертую площадь. Почему это происходит? Поэтому я изменил первый для цикла в компоненте платы на это: < /p>
squareComponents.push();
< /code>
и я изменил квадратный компонент на это: < /p>
function Square(props) {
return (
props.onSquareClick(props.onSquareClickArgument)}>
{props.value}

);
}
< /code>
Это сработало. Но почему мое первое решение этой проблемы не было, а это?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... components