时间戳

首页 > 解决方案 > 如何为函数组件创建 ref

reactjs - 如何为函数组件创建 ref

问题描述

如何为两个 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;
}

标签： reactjsreact-native

解决方案

您可以利用函数回调为 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 两次，因此您需要在 ref 前面加上一个键。也许

<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}]

推荐阅读