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

Question

我需要访问“View”组件中的“GreatGrandChild”组件。

查看组件：

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

子组件：

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

GrandChild组件：

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

GreatGrandChild组件：

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

如何访问“视图”组件中的“Great GrandChild”组件？我可以使用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>

_____和Great GrandChild：

道具：['valueToSend'，...

方法：{

checkTheValue(){

//校验...

这个。$ emit（'updateValue'，valueFromDown）; //我认为这是你的this.component

}

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