react-native - 渲染子组件或从父组件调用子组件的方法,反之亦然[React Native]
问题描述
当从父级下拉刷新时,我试图重新渲染子组件,但不知道该怎么做。这是我目前在我的代码中的内容。
来自父母:
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>
)
}
从孩子(TaskListing):
loadTaskListing(userId){
// get data from server side
}
render() {
return (
<View>
{ /* listing view goes here */ }
</View>
)
}
根据我上面的代码,刷新控件来自父视图,但我要重新加载的功能来自子视图。我将如何从子级触发功能并返回父级以刷新?
解决方案
您可以使用ref
在父级中调用子级的方法。
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()
当你想停止刷新时,打电话给孩子。
推荐阅读
- python - 重写的 QGraphicsView keyPressEvent 从焦点 QGraphicsWidgets 窃取事件
- python - 在 csv 文件中搜索名称并返回整行
- scala - 可以使用反射或类似方法识别/使用 Scala 宏吗?
- go - 戈朗;难以理解作为接收器的功能
- javascript - Javascript 树搜索算法,它返回包含找到的术语及其父项的树的子集
- node.js - docker-compose up 未正确运行应用程序
- node.js - 在 MongoDB 文档字段中添加附件
- python - 尝试从目录中删除文件时出现错误 FileNotFoundError:[WinError 2]
- python - Python - 未处理的异常“未定义名称'main'”
- javascript - commonJS 需要一个默认导出函数返回默认函数