Передача функции ребенку в React

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, когда я нажимаю на них.Я думаю, это потому, что я всегда использую i после завершения цикла for.

Я полагаю, что это проблема основных концепций областей или использования замыкания или чего-то еще, а не проблемы 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>;
}