我需要访问“视图”组件中的“GreatGrandChild”组件。
<View>
<Child>
....
</Child>
</View>
<Child>
<GrandChild>
....
</GrandChild>
</Child>
<GrandChild>
<GreatGrandChild>
....
</GreatGrandChild>
</GrandChild>
<GreatGrandChild ref={(component) => { this.component = component; }}>
....
</GreatGrandChild>
如何访问“视图”组件中的“GreatGrandChild”组件？我可以使用 refs 访问它吗？在这种情况下，哪种生命周期方法最合适？
您可以使用常规props来传递您的 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>
这与innerRefinstyled-components以及他们在 React 文档中如何建议的想法非常相似。
您还可以在每个组件上从子组件发送到父组件，如果您需要从曾孙组件的视图中检查某些内容，您可以这样做：
_____在视图中：
方法： {
更新值（值从下）{
//you have access to the value from greatgranchild, it is valueFromDown
...
},
<Child :valueToSend="valueToSend" @updateValue='updateValue'>
....
</Child>
______在孩子身上：
props：['valueToSend',...
方法：{
updateValue(value){
this.$emit('updateValue', value);
}
},
<GrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
....
</GrandChild>
_____在孙子里：
props：['valueToSend', ...
方法：{
updateValue(value){
this.$emit('updateValue', value);
}
},
<GreatGrandChild :valueToSend="valueToSend" @updateValue='updateValue'>
....
</GreatGrandChild>
_____并在曾孙中：
props：['valueToSend',...
方法：{
checkTheValue(){
//查看...
this.$emit('updateValue', valueFromDown); // 我认为这是你的 this.component
}
<GreatGrandChild ref={(component) => { this.component = component; }}>
....
</GreatGrandChild>