React，传递prop作为函数参数

Question

<div id="board" onClick={(event) => 
                         this.props.boardClicked(event)}>

我想通过第二个参数尝试这样的事情，但我认为我的语法不合适：

<div id="board" 
   onClick={(event, {this.props.activeCharacter}) =>
            this.props.boardClicked(event, {this.props.activeCharacter})}>

Answer 1

简单的改变是因为你使用的是箭头函数，它会自动被词法绑定到react compmponent实例，因此你可以在函数中使用this。只需从函数

中作为额外的arg传递

<div id="board" onClick={(event) => this.props.boardClicked(event, this.props.activeCharacter)}>

在反应中使用事件处理程序中的箭头函数是一个坏主意，因为它会创建一个匿名函数，这将导致此组件不必要地重新呈现，如果组件被大量使用会损害性能

您可以通过在类

上定义处理程序来克服这个问题

onBoardClick = (event) => this.props.boardClicked(event, this.props.activeCharacter)

render = () => <div id="board" onClick={this.onBoardClick} />

现在，您每次都传递相同的函数引用，因此没有不必要的重新渲染，但是相同的单击处理程序功能