我正在學習React，并按照本教程創建了一個簡單的Tic-Tac-Toe游戲，您可以在CodePen中查看。對于在Board組件onClick的renderSquare函數內部返回的Square組件的屬性中的箭頭功能如何工作，我感到困惑onClick={() => this.props.onClick(i)}。同樣，我所擁有的Game組件也同樣如此onClick={ (i) => this.handleClick(i)}。我以為我可以不用箭頭功能（就像一樣onClick={this.handleClick(i)}）來編寫它，但這會中斷游戲。
2 回答
回首憶惘然
TA貢獻1847條經驗 獲得超11個贊
onClick期望功能。箭頭功能沒有自己的功能this; 使用this封閉執行上下文的值。箭頭功能可替代以下功能
onClick={this.handleClick.bind(this,i)}
當您像這樣運行時它不起作用
onClick={this.handleClick(i)}
因為在這種情況下，它將調用一個函數，并且將傳遞一個返回值，該值將在每次調用render時進行評估。因此，如果您在onClick函數中執行某些操作導致例如重新渲染，則setState您的應用程序將陷入無盡的循環。因此onClick需要一個函數而不是一個值，因此除非您從onClick處理程序中返回一個函數，否則不應直接調用它。
上面的Arrow函數執行將參數綁定到函數的作用
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
粗略解釋：onClick采取在事件觸發器上執行的功能。當() => this.foobar(blah)完成后，即創建一個箭頭函數執行foobar帶參數blah。您無法執行此操作的原因{this.foobar(blah)}是，這將執行該函數并傳遞返回值。onClick需要一個函數執行，而不是一個值。
添加回答
舉報
0/150
提交
取消