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

我有一个反应组件内的元素列表,我希望它们是可点击的.点击后,我调用一些外部函数在参数中传递项目ID:

render () {
  return (
    

      {this.props.items.map(item => (
        
 {doSomething(item.id)}>
      ))}
    
  )
}

这段代码有效,但它有很大的性能缺点:每次调用时都会创建许多新的匿名函数render.

如何doSomething在此处传递该功能作为参考,同时仍然可以提供item.id它？

您可以使用数据属性,在使用相同功能时在每个项目上设置正确的ID:

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

render () {
  return (
    

      {this.props.items.map(item => (
        

      ))}
    
  )
}

data-*在元素中设置属性时,可以dataset使用哈希的形式将其恢复.例如,在doSomethingFromEvent我有event.target.dataset = {id: *id*}.在MDN上查看更多信息

这在更新哈希(例如状态)时更加清晰

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

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

回到你的问题,这种方法的好处在于,如果你确保你的容器元素(ul)不能在数据属性(li)的子项外部点击,这是你的情况,你可以在其上声明函数:

render () {
  return (
    

      {this.props.items.map(item => (
        

      ))}
    
  )
}

现在您的功能只创建一次,甚至不会在每个项目中重复.