React：如何将参数传递给回调

Question

我的反应组件中有一个元素列表，我希望它们是可点击的。单击时我调用一些外部函数在参数中传递项目 ID：

 render () {
  return (
    <ul>
      {this.props.items.map(item => (
        <li key={item.id} onClick={() => {doSomething(item.id)}></li>
      ))}
    </ul>
  )
}

这段代码有效，但它有一个很大的性能缺陷：每次调用 render 时都会创建许多新的匿名函数。

我如何传递 doSomething 函数作为参考，同时仍然能够提供 item.id 给它？

原文由 Girafa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 data-attributes ，在使用相同功能的同时为每个项目设置正确的 id ：

 function doSomethingFromEvent(event){
  return doSomething(event.target.dataset.id);
}

render () {
  return (
    <ul>
      {this.props.items.map(item => (
        <li key={item.id} data-id={item.id} onClick={doSomethingFromEvent}></li>
      ))}
    </ul>
  )
}

在你的元素中设置 data-* 属性时，你可以用 dataset 以哈希的形式取回它。例如，在 doSomethingFromEvent 我有 event.target.dataset = {id: *id*} 。 在 MDN 上查看更多

当使用 <li key={item.id} data-myattriute={myvalue} onClick={this.handleClick}></li> 更新哈希（例如状态）时，这甚至更干净，我可以简单地定义 handleClick 例如：

 handleClick(event){
    // Here event.target.dataset = {myattribute: myvalue}

    Object.assign(myObject, event.target.dataset);
    // or
    this.setState(event.target.dataset);
}

回到你的问题，这种方法的好处是，如果你确保你的容器元素（ul）不能在它的带有数据属性（li）的子元素之外被点击，这是你的情况，你可以在它上面声明函数：

 render () {
  return (
    <ul onClick={doSomethingFromEvent}>
      {this.props.items.map(item => (
        <li key={item.id} data-id={item.id}></li>
      ))}
    </ul>
  )
}

现在你的函数被创建了一次，甚至没有在每个项目中重复。

原文由 Pibiche 发布，翻译遵循 CC BY-SA 3.0 许可协议