Question

我是React Js的新手，我正在尝试映射组件数组。而且我需要将一个函数绑定到每个组件，然后使用道具在每个组件内部调用该函数。

// main component
array1 = [<component1> , <component2> , <component3> , <component4>];

// other compoenent
this.state = this.props.array1;

{this.state.map( (item, index)=> {
  {item} // bind function here
})}

如果这些组件与我需要在同一组件中。我要这样做：

handleNext() {
  // do stuff
}

<component next={this.handleNext.bind(this}>

但是我不能将下一个作为道具添加到array.map的项目中。我想以某种方式做到这一点：

handleNext() {
  // do stuff
}

{this.state.map( (item, index)=> {
  {item next={this.handleNext.bind(this)} // bind function here
})}

如果你们知道有什么解决方案可以帮助我。我会很高兴。

Answer 1

您可以通过两种方式实现它。使用React.CloneElement，然后添加新的道具，或者您可以使用数组中的组件，然后传递新的道具。沙盒https://codesandbox.io/s/3kvok39pn1

中包含了两种解决方案

我们可以将功能作为道具添加到array.map（item，index）中的每个项目吗

1 个答案: