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

debugcn 发表于 Dev

翠

我试图从父级下拉刷新时重新渲染子级组件，但不知道该怎么做。这是我当前在代码中所拥有的。

来自父母：

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

根据我上面的代码，刷新控件来自父视图，但我要重新加载的功能来自子视图。如何从子级触发功能并返回父级以进行刷新？

Jaydeep加拉尼

您可以用来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()您想停止刷新时打电话给孩子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。