访问父组件中的嵌套子组件答案

【问题标题】：Access a nested grand child component in a parent component访问父组件中的嵌套子组件
【发布时间】：2023-03-24 07:19:01
【问题描述】：

我需要在“查看”组件中访问“GreatGrandChild”组件。

查看组件：

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

子组件：

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

GrandChild 组件：

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

GreatGrandChild 组件：

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

如何访问“查看”组件中的“GreatGrandChild”组件？我可以使用 refs 访问它吗？在这种情况下，哪种生命周期方法最合适？

【问题讨论】：

您想访问什么？它的state 还是它的DOM 表示（即ref）？
DOM 表示
为什么要访问它？

标签： reactjs components parent lifecycle refs

【解决方案1】：

您可以使用常规道具来传递您的 ref - 但它必须具有不同的名称：

// 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>

这与 styled-components 中的 innerRef 以及他们在 React 文档中的建议非常相似。

【讨论】：

【解决方案2】：

您还可以在每个组件上从子级发射到父级如果您需要从曾孙的视图中检查某些内容，您可以这样做：

_____在视图中：

方法：{

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>

_____和曾孙：

道具：['valueToSend',...

方法：{

checkTheValue(){

//检查...

this.$emit('updateValue', valueFromDown); // 我认为这是你的 this.component

}

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

【讨论】：