как создать ссылку для функционального компонента

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

Когда вы используете sh для доступа к ним, вы можете получить к ним доступ из объекта 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} ]