箭头函数参数答案

【问题标题】：Arrow function parameters箭头函数参数
【发布时间】：2017-10-02 18:58:48
【问题描述】：

我正在做一些反应教程并有这个代码

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 元素添加内容吗？
i 只是事件。我建议将其更改为 e 或 event 以避免混淆。
无论如何，抛开对事件处理的误解，您要解决什么具体问题？

标签： javascript reactjs arrow-functions

【解决方案1】：

好的，所以我再次检查了“我的”代码，如果我做对了，似乎此时我只是将处理程序作为道具传递给 Board-component。在那里，我再次将它作为道具传递给我的 Square 组件，在那里我对处理程序进行实际调用。

这发生在 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>
);

【讨论】：