我尝试从父级下拉刷新时重新渲染子级组件,但不知道该怎么做。这是我当前在代码中提供的内容。
来自父母:
OnRefresh = () => {
this.setState({refresh: true});
// call function loadTaskListing() from child component
this.setState({refresh: false});
}
render() {
return (
<View>
<ScrollView refreshControl={<RefreshControl refreshing={this.state.refresh} onRefresh={this.OnRefresh} />}>
<TaskListing navigation={this.props.navigation} />
</ScrollView>
</View>
)
}
从子(任务列表):
loadTaskListing(userId){
// get data from server side
}
render() {
return (
<View>
{ /* listing view goes here */ }
</View>
)
}
基于上面的代码,刷新控件来自父视图,但我要重新加载的功能来自子视图。我该如何从子级触发功能并返回父级以进行刷新?
您可以使用refs
在父级中调用子级的方法。来自
OnRefresh = () => {
this.setState({refresh: true});
// call method of child component using ref
this.taskListRef.loadTaskListing();
}
refreshDone =()=>{
this.setState({refresh: false});
}
render() {
return (
<View>
<ScrollView refreshControl={<RefreshControl refreshing={this.state.refresh} onRefresh={this.OnRefresh} />}>
<TaskListing
ref={instance=>this.taskListRef = instance} // ref assigning
navigation={this.props.navigation}
refreshDone={this.refreshDone}
/>
</ScrollView>
</View>
)
}
想要停止刷新时在孩子中拨打this.props.refreshDone()
。>