Question

我有一个函数，它较早地接受了两个参数，它过去只需要接受一个参数，因此可以在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现在如何在道具中传递它？

Answer 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)}
      />
))

通过这种方式，您可以从child传递许多参数并将其接收到函数中，而不必担心每次要添加新参数时都会添加参数

Answer 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}
/>

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

2 个答案: