Javascript 如何从组件父级为组件子级调用函数

我有Home.js的代码是组件父母。 我想在组件CartScreen上重置cart（）后，在主屏幕上调用函数reload（）重置徽章车

reload = () =>{
        this.componentDidMount();
    }
    componentDidMount(){
        this._isMounted = true;
        this.props.navigation.addListener('focus',()=>{
            if(this._isMounted){
                this.checkInternet();
                this._getasyc();
            }
        });
        
        this.checkInternet();
        this._getasyc();
    }

render(){
    //    const {ten} = this.props.route.params
        return(
            <View style={{ flex:1 }}>
                <StatusBar backgroundColor='#555555' barStyle="light-content" />
                <Appbar style={styles.appbar}>
                    <Appbar.Action icon="format-list-bulleted" onPress={()=>(this.props.navigation.dispatch(DrawerActions.openDrawer()))}/>
                    <Appbar.Content title="GREAT FOOD" />
                    <Badge  
                        visible={this.state.itemcart && this.state.itemcart >0}
                        size={17}
                        style={{ position: 'absolute', top: 5, right: 55 }}>{this.state.itemcart}</Badge>
                    <Appbar.Action icon="cart" onPress={()=>{this.props.navigation.navigate('cart')}}/>
                    <Appbar.Action icon="phone-in-talk" onPress={()=>{this.contact()}}/>
                </Appbar>
                
                <Drawer.Navigator 
                    overlayColor="transparent"   

                > 
                    <Drawer.Screen name ="home" component={HomeScreen} 
                        options={{
                            drawerLabel:"Menu",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="home" color={color} size={26} />
                        ), }}
                        />
                    <Drawer.Screen name="profile" component={ProfileScreen}
                            options={{
                            drawerLabel:"Hồ sơ",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="account-circle" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="fullfood" component={FullFood}
                        options={{
                            drawerLabel:"Tất cả món ăn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="food" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name= "favourite" component={FavouriteScreen}
                        options={{    
                            drawerLabel:"Yêu thích",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="heart-pulse" color={color} size={26} />
                        ), }}
                    />
                     <Drawer.Screen name= "booking" component={BookingScreen}
                        options={{
                            drawerLabel:"Đặt bàn",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="table-furniture" color={color} size={26} />
                        ), }}
                    />
                    <Drawer.Screen name="cart" component={CartScreen} 
                        options={{
                            drawerLabel:"Giỏ hàng",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="cart" color={color} size={26} />
                        ), }}
                        
                    />
                    <Drawer.Screen name="setting" component={SettingScreen}
                        options={{
                            drawerLabel:"Cài đặt",
                            drawerIcon:({color})=>(
                                <MaterialCommunityIcons name="wrench-outline" color={color} size={26} />
                        ), }}
                    />
                </Drawer.Navigator>
             <Snackbar
                visible={this.state.statusInform}
                onDismiss={()=>{this}}
                action={{
                label: 'Tắt',
                onPress: () => {
                this.setState({statusInform:false})
              },
             }}>
            Vui lòng kiểm tra kết nối.
            </Snackbar>
        </View>
        )
    }
}

我尝试在CartScreen上使用这个.props.function（），但我不知道如何在主屏幕上调用函数。

---

谁来帮帮我

您可以使用ref来执行此操作。为子组件提供一个ref，然后您可以使用yourRefName.current.methodName（）调用其方法； 像这样改变你的抽屉屏幕 （）}

---

我尝试并收到的警告是：看起来您正在为屏幕“购物车”的“组件”道具传递一个内联函数（例如组件={（）=>}）。传递内联函数将导致组件状态在重新渲染时丢失，并导致性能问题，因为它是在每次渲染时重新创建的。您可以将函数作为孩子传递到“屏幕”以实现所需的行为。尝试一下，希望它能起作用，但我想我的解决方案起作用了，因为我已经为我的一些应用程序完成了它。我已经查阅了一些帖子。而不是使用component={（）=>（）}，然后我使用children={（）=>{}，它工作了。但我仍然不能调用函数reload（），但若我在CartScreen中使用HomeRef，那个么screen-CatScreen将显示双原因CartScreen是Home的类组件子类。即使在家中使用CartRef，当我停留在CartScreen更新cart时，我也必须调用reload（）

 _resetCart = async()=>{
        this.setState({spinner:true});
        setTimeout(() => {
            this.setState({spinner:false})
        }, 1000);
        await AsyncStorage.removeItem('keyOrdermonan'); 
        this.setState({getMangAsync:[],tongTien:0});
        this._getAsync();
        // this.props.reloadnaonao();
    }