javascript - 箭头功能参数

我正在做一些反应教程，并有此代码

return (
        <div className="game">
            <div className="game-board">
                <Board
                    squares={current.squares}
                    onClick={(i)=>this.handleClick(i)}
                />
            </div>
            <div className="game-info">
                <div>{status}</div>
                <ol>{/* TODO */}</ol>
            </div>
        </div>
    );

我对JS很陌生，箭头功能确实存在一些问题。打电话时

onClick={(i)=>this.handleClick(i)}

我怎么知道数字“ i”或更确切地说是索引？ js怎么知道要放入什么值，这样我才能真正得到所需的索引？

最佳答案

好的，所以我再次浏览了“我的”代码，如果我正确理解了，这时，我似乎只是将处理程序作为道具传递给了Board组件。在这里，我再次将其作为道具再次传递给我的Square组件，在这里我对处理程序进行了实际调用。

这在董事会中发生：

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

这发生在Square中：

function Square(props) {
return (
    <button className="square" onClick={props.onClick}>
        {props.value}
    </button>
);

关于javascript - 箭头功能参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43785553/