어디에서 왔는가?

Question

React 튜토리얼에서 그들은 tic-tac-toe 게임을 만든다. 이 코드를 얻을 때까지는 쉽게 이해할 수있었습니다.

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

이 코드는 click 이벤트 처리기입니다. 하지만 코드에서이 변수가 어디서 왔는지는 알지 못했습니다. React가 클릭하는 정확한 버튼을 어떻게 알 수 있습니까? 튜토리얼을 읽는 사람이 설명해 주시겠습니까? 원본을 찾을 때까지

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

변수와 함수를 따르

여기에 전체 코드가 (I 개인 목적으로 onActivation에 onClick 소품을 변경) 간다.

squares[i] = 'X';으로 시작하는이 줄은 handleClick()의 내부에 있으며 그 매개 변수는 i입니다. handleClick()은 onActivation={()=>this.handleClick(i)} 내에서 호출되며 renderSquare() 함수에 있으며이 매개 변수는 다시 i입니다. renderSquare()은 구성 요소의 render() 메소드에서 사용되며, 여기서 renderSquare()의 각 사용에는 숫자 인수가 전달됩니다.

예 : this.renderSquare(7). 이 경우 숫자 7은 renderSquare에서 handleClick에서 squares[i]으로 전달됩니다. 당신은 내가 '난'renderSquare()의 범위에 빠진 것을 발견

Answer 2

시각적 형식을 경우가 handleCLick()