React : 통과 기능이 소품으로

Question

소품으로 기능을 전달하는 것과 관련된 질문이 있습니다.

<div className="game-board"> 
    <Board 
    squares = { current.squares } 
    onClick = {(i) => this.handleClick(i) } 
    /> 
</div> 

첫째, 우리는이 대신 같은 기능을 통과 왜 캔트 :

onClick = { this.handleClick(i) } 

마지막 게임 구성 요소가 같은 온 클릭 핸들러를 전달에서 틱택 토 튜토리얼 ( https://facebook.github.io/react/tutorial/tutorial.html)에서

내가 지나가는 것을 이해 "i"가 중요하지만 튜토리얼의 중간에 뭔가 나를 혼동 :

여기

return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />; 

우리가 "I"를 파레에 전달하지 않습니다 화살표 함수의 nthesis. 나는 질문을 덜 장황하게하기 위해 너무 많이 쓰고 싶지 않다. 나는 어떤 사람들이이 튜토리얼을 끝내고 내 질문에 답을 줄 수있을 것이라고 확신한다.

업데이트 : 간단하고 유용한 답변은 누구나 쉽게 알 수 있습니다. 후속 조치로서 공식 문서에서 함수가 구성 요소의 이벤트 처리기로 사용될 경우 함수를 바인딩하라는 메시지가 표시됩니다. 왜 이것이 필요하며 어떻게 튜토리얼에 사용되지 않았습니까?

Answer 1

이 (가 기능 onClick에 결합하기 전에를 호출 ) 기능을 통과하지 않습니다

onClick = { this.handleClick.bind(null, i) } 

을하지만, 화살표 기능이 명확하게 보인다 또는

onClick = { this.handleClick(i) } 

, 당신은 결합 수 읽기 (적어도 IMHO).

두 번째 문제의 경우 은 이 아닌 onClick의 매개 변수입니다. onClick에는 매개 변수 (첫 번째는 event 개체 임)가 있지만이 경우 onClick 매개 변수는 필요 없으므로 비어 있습니다. 당신이 할 수있는이 기능에서이 표현이 실제로 그 함수, 지금은 다음 함수에 인수를 전달하는 방법, 방식에있다 참조를 호출

onClick = { this.handleClick(i) } 

Answer 2

다빈이 말했듯이,

(i) => this.hadleClick(i) 

당신은 현재 구성 요소를 참조 개체를 사용할 수뿐만 아니라 귀하의 인수를 사용합니다.

초 방법 :

this.handleClick.bind(null, i) 

다음

또한 당신의 인수를 사용할 수 있지만 구성 요소의이 객체를 사용할 수 없습니다

널 (null)이 이벤트가 발생되는 DOM 될 것입니다.

Answer 3

onClick 매개 변수에 입력 한 내용은 렌더링 프로세스 중에 실행됩니다. 이는 수행하려는 작업이 아닙니다. DOM 이벤트 중에 일부 작업을 실행하려고합니다.

이 튜토리얼에서는 큰 화살표 구문을 사용합니다. 즉, 다른 함수 (이 경우 handleClick 메서드)를 반환하는 함수를 호출하므로 마크 업이 렌더링 될 때 매개 변수 내부에서 함수가 실행됩니다 사용자가 요소를 클릭하면 실제 작업을 수행하는 함수를 반환합니다.