从数组中每个子项的父项调用方法<view>

Question

这是反应本机(JSX(。

我有父母和子部分。父组件包含一系列儿童组件。在某些时候，我需要暂停子组件，因此我需要从每个中的每个方法中调用某种方法。这就是我尝试这样做的方式：

<View style={styles.fruits}>
      {this.state.fruitComponentArray.map((index, value) => (
        <Fruit key={index} style={styles.fruit}
          onStopAnimation={_ => this.deleteElementFromFruitArray(index)}
          onSendCoordinates={(x, y) => this.checkCoordinates2(x, y, value)}
          onRef={ref => (this.child = ref)} 
        />
      ))}
    </View>

和带有按钮的调用功能：

<TouchableOpacity onPress={_ => this.child.onPause()}>

然后在子组件中有onPause()功能。

我知道问题是在裁判命名中，并且因为我总是发送一个参考文献，仅引用了最后一个孩子组成部分。因此，与其暂停所有水果，它只是停止最后一个水果，但我不知道如何解决它。

编辑：

在下面的程序员的帮助下，它的结尾是它的样子：我在构造函数

中有这个

this.child = [];

此方法(新(：

 callChildrenMethods = () => {
for(var i=0; i<this.state.fruitComponentArray.length; i++){
  this.child[i].onPause();
}

}

视图数组：

    <View style={styles.fruits}>
      {this.state.fruitComponentArray.map((index, value) => (
        <Fruit key={index} style={{flex:1, position: 'absolute' , height: `${ this.state.heights[index] }%`}}
          onStopAnimation={_ => this.deleteElementFromFruitArray(index)}
          onSendCoordinates={(x, y) => this.checkCoordinates2(x, y, value)}
          onRef={ref => (this.child[index] = ref)}
        />
      ))}
    </View>

最后一个onClick：

 <TouchableOpacity onPress={_ => this.callChildrenMethods()}>

Answer 1

尝试创建保留所有裁判的参考阵列，对此进行了审议onref = {ref =>(this.child = ref(}尝试这个onref = {ref =>(this.Child [index] = ref(}这可能是技巧