どこから来たのですか？

Question

Reactチュートリアルでは、彼らはチック・タック・トゥ・ゲームを構築します。

handleClick(i) { 
     const squares = this.state.squares.slice(); 
     squares[i] = 'X'; 
     this.setState({squares : squares}); 
} 

このコードは、クリックイベントのハンドラです。しかし、私はこのコードで変数がどこから来たのか分からなかった。 Reactは私がクリックしている正確なボタンをどのように知っていますか？チュートリアルを読んだ人は誰でも私のために説明できますか？ここで

は（私が個人的な目的のためにonActivationにonClick小道具を変更）完全なコードを行く：あなたがソースを見つけるまで

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

は、変数や関数に従ってください。

squares[i] = 'X';で始まるその行は、handleClick()の内部にあり、パラメータはiです。 handleClick()は、onActivation={()=>this.handleClick(i)}内で呼び出され、renderSquare()関数内にあり、再びiをパラメータとして呼び出します。 renderSquare()は、renderSquare()の各使用に数値引数が渡される、コンポーネントのrender()メソッド内で使用されます。例えば、this.renderSquare(7)。この場合、番号7はrenderSquare〜​​〜squares[i]に渡されます。

あなたは視覚的なタイプ

Answer 2

なら、私は `i`が引数であるhandleCLick()