反应，将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组件实例，因此您可以在函数内使用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} />

现在，您每次都传递相同的函数引用，因此无需重新渲染，而具有相同的单击处理程序功能