Question

我想使用道具将函数传递给孩子，并创建几个可以单击的组件

父类：

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

由于关闭而发生，因为您在forLoop迭代器中使用var关键字，因此其范围将是render函数，并且传递给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>;
}

在React中将函数传递给子级

1 个答案: