Визуализация дочернего компонента или вызов метода дочернего компонента из родительского компонента и наоборот [React Native]

Question

Я пытаюсь перерисовать дочерний компонент, когда выпадаю refre sh из 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>
    )
}

От ребенка (TaskListing):

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

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

На основании приведенного выше кода refre sh элемент управления из родительского представления, но функция, которую я хочу перезагрузить, из дочернего представления. Как я собираюсь вызвать функцию от ребенка и вернуться к родителю, чтобы получить обновление?

Answer 1

Вы можете использовать ref для вызова дочернего метода в parent.

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() у ребенка, когда вы хотите прекратить обновление.