在父组件中访问嵌套的孙子组件

Question

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

查看组件：

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

子组件：

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

孙组件：

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

曾孙组件：

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

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

Answer 1

您可以使用常规 prop 来传递您的 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 文档中的建议非常相似。

Answer 2

您还可以在每个组件上从 child 发射到 parent 如果你需要从曾祖父child的视图中检查一些东西，你可以这样做：

_____in 视图：

方法：{

更新值（valueFromDown）{

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

...

},

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

______in child :

道具：['valueToSend',...

方法：{

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

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

_____in 奶奶child:

道具：['valueToSend', ...

方法：{

    updateValue(value){

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

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

_____and 曾孙：

道具：['valueToSend',...

方法：{

checkTheValue(){

//检查...

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

}

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

在父组件中访问嵌套的孙子组件

Access a nested grand child component in a parent component

lifecycle

components

parent

refs

reactjs

查看组件：

子组件：

孙组件：

曾孙组件：