在 React 中将函数传递给子进程

Question

我想用 props 给孩子传递函数，并创建几个可以点击的组件

父类：

handleClick(i){
    alert(i);
}

render(){
    var items = [];
    for (var i = 0; i < 7; i++) {
      items.push(
        <Item onClick={()=>this.handleClick(i)} />
      );
    }
    return <ul>{items}</ul>;
}

子类：

render() {
    return (
      <li onClick={this.props.onClick}> some names </li>
    );
}

但是结果和我预想的不一样。

我希望第一个元素指向alert(0)，第二个元素指向alert(1)，依此类推。

但是，当我点击它们时，所有元素都会显示7。我想那是因为我总是在 for 循环完成后使用i。

我猜这是关于作用域的基本概念或使用闭包之类的问题，而不是 React 问题。但我仍然找不到解决此问题的正确方法。

Answer 1

这是因为闭包而发生的，因为您使用 var 关键字作为 forLoop 迭代器，它的作用域将是渲染函数，传递给 handleClick 的值将始终是迭代器的更新值。使用let关键字解决闭包问题

render(){
    var items = [];
    for (let i = 0; i < 7; i++) {  // let keyword for iterator
      items.push(
        <Item onClick={()=>this.handleClick(i)} />
      );
    }
    return <ul>{items}</ul>;
}

即使使用 var，也可以使用匿名函数解决闭包问题

render(){
    var items = [];
    for (var i = 0; i < 7; i++) {
      (function(index){
          items.push(
              <Item onClick={()=>this.handleClick(i)} />
          );
      }.bind(this))(i)
    }
    return <ul>{items}</ul>;
}