箭头函数参数

Question

我正在做一些react教程，我有下面的代码

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如何知道放入什么值，这样我才能真正得到我需要的索引呢？

Answer 1

好了，我又看了一遍“我的”代码，如果我做对了，看起来在这一点上，我只是把处理程序作为一个道具传递给Board-component。在那里，我将其作为prop进一步传递给Square-component，在那里我对处理程序进行了实际调用。

这发生在Board中：

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>
);