我需要访问“View”组件中的“GreatGrandChild”组件。
<View>
<Child>
....
</Child>
</View>
<Child>
<GrandChild>
....
</GrandChild>
</Child>
<GrandChild>
<GreatGrandChild>
....
</GreatGrandChild>
</GrandChild>
<GreatGrandChild ref={(component) => { this.component = component; }}>
....
</GreatGrandChild>
如何访问“视图”组件中的“Great GrandChild”组件?我可以使用refs访问它吗?在这种情况下哪种生命周期方法最合适?
您可以使用常规道具传递您的参考 - 但它必须具有不同的名称:
// 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中提出建议。
您还可以在每个组件上从子级发送到父级,如果您需要在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>