Javascript React，将prop作为函数参数传递

我想通过第二个参数尝试类似的方法，但我的语法不正确，我认为：

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

---

简单的更改是，因为您使用的是arrow函数，所以它会自动词汇绑定到react component实例，所以您可以在函数中使用它。只需在函数中作为额外参数传递即可

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

在react中的事件处理程序中使用箭头函数是一个坏主意，因为它会创建匿名函数，这将导致该组件不必要地总是重新渲染，如果该组件被大量使用，则会影响性能

您可以通过在类上定义处理程序来克服这一问题

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

---

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

您不应该需要{this.props.activeCharacter}的{}。函数的第一部分也不需要任何参数。例如，事件，{this.props.activeCharacter}=>可以是=>顺便说一句，我不知道您的情况，但是很少将事件传递给作为props传入的处理程序-它通常只在本地用于停止事件传播或从中派生一些值，然后传递给您的处理程序。如果没有this.props.boardClicked中的事件arg，您可能已经足够了，只需将字符onBoardClick=event=>this.props.boardClicked this.props.activeCharacter传递到其他位置即可更改boardClicked签名，以适应此情况

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

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