我正在学习 JavaScript / React。我正在尝试为 React 网站上的 tic-tac-toe 示例创建一个简单的 for 循环,但到目前为止它还存在问题。奇怪的是,有几个映射示例,但没有 for 循环示例。
无论如何,对于以下内容:
function Row(props){
function renderSquare (i) {
return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
}
const columns = 3;
let ss = [];
for(var a = 0, i = props.counter * columns; a < 3; a++, i++){
//Test Code
}
return (
<div className="board-row">
{ss}
</div>
);
}
当我替换“测试代码”时,这有效
ss.push(renderSquare(i));
但这失败了
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
第二个选项失败,因为它没有创建“单独的”onClick 元素。我怎样才能让失败的例子发挥作用?
更新#1
Sample https://codepen.io/TriStarGod/pen/mRpVwV?editors=0111
更新#2
我按照@Matthias247的建议将var更改为let,现在它可以工作了:D
function Row(props){
function renderSquare (i) {
return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
}
const columns = 3;
let ss = [];
for(let a = 0, i = props.counter * columns; a < columns; a++, i++){
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
//ss.push(renderSquare(i));
//console.log(i);
}
return (
<div className="board-row">
{ss}
</div>
);
}
我认为问题在于你捕获了i
进入元素和onClick
关闭。你改变i
在 for 循环期间,但最终所有插入的元素都是相同的 ->props.counter + 3
.
要修复此问题,您需要为每个元素创建所有捕获值的唯一实例。这正是您所做的renderSquare
方法创建一个新实例i
在函数体内,现在由元素捕获。
Edit:
Using a let
绑定(每次迭代都会创建变量的新实例)也有效:
for (let a = 0, i = props.counter; a < 3; a++, i++) {
ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)