如何在 React 的 props 中发送两个参数函数？答案

【问题标题】：How to send a two argument function in props in React?如何在 React 的 props 中发送两个参数函数？
【发布时间】：2018-06-27 10:44:01
【问题描述】：

我有一个函数，它之前接受两个参数，它曾经只接受一个参数，所以在 props 中传递它是这样的：-

mixed1.map((cat1) => (<ServicesCategoryOption category1={cat1.categories} setacatid={i=>this.setacatid(i)}/>))

但现在我将 setacatid 更改为：-

setacatid(a,b){
    console.log(b);
    this.setState({                     
        catidofclicked:a,
        catnameofclicked:b
    },function(){
        localStorage.setItem('selecteditem',this.state.catidofclicked);
        localStorage.setItem('selectedname',this.state.catnameofclicked);           
    });
}

那么它需要两个参数 a 和 b 现在如何在 props 中传递呢？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

当您使用箭头函数语法时，您可以将多个参数传递给事件处理程序

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(a, b)=>this.setacatid(a, b)}
      />
))

或者你可以简单地写

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(...args)}
      />
))

可以简单地写成

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={this.setacatid}
      />
))

使用第一种方法的唯一好处是你可以像传递自定义值一样

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(1, ...args)}
      />
))

您可以通过哪种方式从子级传递许多参数并在函数中接收它们，而不必担心每次要添加新参数时都添加参数

【讨论】：

表达式setacatid={(...args)=>this.setacatid(...args)} 与setacatid={this.setacatid} 完全相同，但第二个表达式较短且资源密集度较低。
@oklas，是的，使用 ...args 的唯一优势可能是您希望将自定义参数与函数接收的参数一起传递。

【解决方案2】：

你可以为所欲为：

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={i=>this.setacatid(i,10)}
/>

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={(i, j)=>this.setacatid(i, j)}
/>

<ServicesCategoryOption
  category1={cat1.categories}
  setacatid={this.setacatid}
/>

【讨论】：