渲染 child 组件或从 parent 组件调用 child 组件的方法，反之亦然[React Native]

Question

当从 parent 下拉刷新时，我正在尝试 re-render child 组件，但不知道如何操作。这是我目前在我的代码中的内容。

来自 parent :

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>
    )
}

来自 child（任务列表）：

loadTaskListing(userId){
    // get data from server side
}

render() {
    return (
        <View>
            { /* listing view goes here */ }
        </View>
    )
}

根据我上面的代码，刷新控件来自 parent 视图，但我要重新加载的功能来自 child 视图。我要如何触发从 child 和 return 到 parent 的功能来刷新？

Answer 1

您可以使用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()。

渲染 child 组件或从 parent 组件调用 child 组件的方法，反之亦然[React Native]

Render child component or call child component's method from parent component and vice versa[React Native]

parent-child

pull-to-refresh

react-native