Question

如何为两个getAllNumbers（）函数组件创建父引用？

<View>{this.getAllNumbers()}</View>
<View>{this.getAllNumbers()}</View>


getAllNumbers() {
    let itemArr = [];

    for (let i = 0; i < numberArray.length; i++) {
      itemArr.push(
        <NumberView
          ref={"NumberView" + numberArray[i]}
          key={`rowA${i}`}
        />
      );
    }

    return itemArr;
}

Answer 1

您可以利用函数回调为NumberView组件创建引用

constructor() {
   super()
   this.numberViewRefs = {};
}
...

getAllNumbers() {
    var itemArr = [];

    for (let i = 0; i < numberArray.length; i++) {
      itemArr.push(
        <NumberView
          ref={(ref) => this.numberViewRefs[i] = ref}
          key={`rowA${i}`}
        />
      );
    }

    return itemArr;
}

当您希望访问它们时，可以使用索引从numberViewRef对象访问它们。

例如：this.numberViewRef[i]

由于您两次调用了getAllNumbers，因此需要在引用前面加一个键。也许

<View>{this.getAllNumbers("first")}</View>
<View>{this.getAllNumbers("second")}</View>

然后

getAllNumbers(key) {
    var itemArr = [];

    for (let i = 0; i < numberArray.length; i++) {
      itemArr.push(
        <NumberView
          ref={(ref) => this.numberViewRefs[`${key}${i}`] = ref}
          key={`rowA${i}`}
        />
      );
    }

    return itemArr;
}

并引用它

this.numberViewRefs[ $ {key} $ {i} ]或this.numberViewRefs[前$ {i} ]

如何为功能组件创建引用

1 个答案: