Woher kam dieses 'ich'?

Question

Im React-Tutorial bauen sie ein Tic-Tac-Toe-Spiel auf. Es war einfach zu verstehen, bis ich diesen Code bekam:

Dieser Code ist ein Handler für ein Klickereignis. Aber ich habe nicht verstanden, woher diese 'i'-Variable im Code kommt. Wie weiß React den genauen Button, auf den ich klicke? Kann mir bitte jemand erklären, der das Tutorial gelesen hat?

geht hier der vollständige Code (Ich habe die onClick prop zu onActivation für persönliche Zwecke):

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 


class Square extends Component { 
    render(){ 
     return (
      <button 
       className="square" 
       onClick={() => this.props.onActivation()}> 
       {this.props.value} 
      </button> 
     ); 
    } 
} 
class Board extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      squares: Array(9).fill(null), 
     } 
    } 
    handleClick(i) { 
     const squares = this.state.squares.slice(); 
     squares[i] = 'X'; 
     this.setState({squares : squares}); 
    } 
    renderSquare(i) { 
     return (
      <Square 
      value={this.state.squares[i]} 
      onActivation={()=>this.handleClick(i)} 
      /> 
     ); 
    } 
    render(){ 
     const status = "Next Player: X"; 
     return (
      <div> 
      <div className="status">{status}</div> 
      <div className="board-row"> 
      {this.renderSquare(0)} 
      {this.renderSquare(1)} 
      {this.renderSquare(2)} 
      </div> 
      <div> 
      {this.renderSquare(3)} 
      {this.renderSquare(4)} 
      {this.renderSquare(5)} 
      </div> 
      <div> 
      {this.renderSquare(6)} 
      {this.renderSquare(7)} 
      {this.renderSquare(8)} 
      </div> 
      </div> 
      ) 
    } 
} 

class Game extends Component { 
    render() { 
     return (
      <div className="game"> 
      <div className="game-board"> 
      <Board/> 
      </div> 
      <div className="game-info"> 
     <div>{/* status */}</div> 
    <ol>{/* TODO */}</ol> 
    </div> 
    </div> 
    ) 
    } 
} 

ReactDOM.render(<Game/>, document.getElementById('root')); 

Answer 1

die Variablen und Funktionen folgen, bis Sie die Quelle finden.

Beginnend mit squares[i] = 'X'; ist diese Zeile innerhalb einer Funktion handleClick(), die i als Parameter hat. handleClick() heißt innerhalb onActivation={()=>this.handleClick(i)} aufgerufen, die in der renderSquare() Funktion ist, die wiederum i als Parameter hat. renderSquare() wird innerhalb der render()-Methode der Komponente verwendet, wobei jeder Verwendung von renderSquare() ein numerisches Argument übergeben wird.

Zum Beispiel this.renderSquare(7). In diesem Fall wird die Nummer 7 über renderSquare an handleClick bis squares[i] übergeben.

Wenn Sie den visuellen Typ sind

Answer 2

Ich fand, dass das ‚i‘ im Rahmen der renderSquare() gehisst, deshalb kann es durch handleCLick()