Доступ к вложенному дочернему компоненту grand в родительском компоненте

Question

Мне нужно получить доступ к компоненту GreatGrandChild в компоненте View.

Просмотр компонента:

<View>
  <Child>
    ....
  </Child>
</View>

Дочерний компонент:

<Child>
  <GrandChild>
      ....      
    </GrandChild>
</Child>

Компонент GrandChild:

<GrandChild>
  <GreatGrandChild>
    ....
  </GreatGrandChild>
</GrandChild>

Компонент GreatGrandChild:

<GreatGrandChild ref={(component) => { this.component = component; }}>
  ....
</GreatGrandChild>

Как получить доступ к компоненту "GreatGrandChild" в компоненте "Просмотр"? Могу ли я получить к нему доступ с помощью ссылок? Какой метод жизненного цикла будет наиболее подходящим в этом случае?

Answer 1

Вы можете использовать обычную опору, чтобы передать свой реф, но у него должно быть другое имя:

// somewhere in constructor
this.greatGrandChild = React.createRef();

<View>
  <Child greatGrandChildRef={this.greatGrandChild}>
    ....
  </Child>
</View>


<Child>
  <GrandChild greatGrandChildRef={this.props.greatGrandChildRef}>
      ....      
    </GrandChild>
</Child>


<GrandChild>
  <GreatGrandChild greatGrandChildRef={this.props.greatGrandChildRef}>
    ....
  </GreatGrandChild>
</GrandChild>

<GreatGrandChild ref={this.props.greatGrandChildRef}>
  ....
</GreatGrandChild>

Это очень похоже на идею innerRef в styled-components и как они предлагают это в React документах.

Answer 2

Вы также можете передавать от дочернего элемента к родительскому элементу в каждом компоненте, и если вам нужно проверить что-то из представления в greatgrandchild, вы можете сделать так:

_____ввиду:

методы: {

updateValue (valueFromDown) {

//you have access to the value from greatgranchild, it is valueFromDown 

...

},

<Child :valueToSend="valueToSend" @updateValue='updateValue'>
    ....
</Child>

______ в ребенке:

реквизиты: [ 'valueToSend',...

методы: {

     updateValue(value){
        this.$emit('updateValue', value);
    }
  },

<GrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
      ....      
</GrandChild>

_____ в внуке:

реквизиты: [ 'valueToSend',...

методы: {

    updateValue(value){

        this.$emit('updateValue', value);
    }
  },

<GreatGrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
      ....      
</GreatGrandChild>

_____ и в GreatGrandChild:

реквизиты: [ 'valueToSend',...

методы: {

checkTheValue(){

//проверять...

this. $ emit ('updateValue', valueFromDown); // я думаю, что это ваш this.component

}

<GreatGrandChild ref={(component) => { this.component = component; }}>
  ....
</GreatGrandChild>