访问父组件中的嵌套的grand子组件

Question

我需要访问＆＃39; GreatGrandChild＆＃39; ＆＃39;视图＆＃39;中的组件成分

查看组件：

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

子组件：

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

GrandChild组件：

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

GreatGrandChild组件：

:focus {
    outline: black dotted 1px;
}

如何访问＆＃39; GreatGrandChild＆＃39; ＆＃39;视图＆＃39;中的组件零件？ 我可以使用refs访问它吗？在这种情况下哪种生命周期方法最合适？

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 docs中的建议方式大致相同。

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>