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

Question

Мне нужен доступ к компоненту «GreatGrandChild» в компоненте «Просмотр».

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

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

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

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

Компонент GrandChild:

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

Компонент GreatGrandChild:

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

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

Answer 1

вы также можете передавать от дочернего элемента к родительскому элементу в каждом компоненте, и если вам нужно проверить что-либо из представления в 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(){

// check ...

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

}

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

Answer 2

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

// 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 документах.