Comment transmettre des props d'un composant à un autre composant

Question

Je possède deux composants, l'un est rendu à l'intérieur de l'autre et le parent a des actions nécessaires pour l'enfant, mais je ne sais pas comment les transmettre

Console Log à la fin, j'ai besoin que les actions soient transmises à l'enfant car l'enfant en a besoin

Le souci est que l'enfant est déjà rendu sur le même écran donc je ne sais pas comment transmettre cette information

Composant Parent Radius :

render(){
    console.log("radiuscomp ", this.props)
    return(

                {this.updateContent()}
                 //c'est le composant enfant 

    )
}

function mapStateToProps(state){
    return {
       updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
    };
}

function mapDispatchtoProps(dispatch){
   return bindActionCreators(actions,dispatch);
}

let SearchRadiusContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchRadiusComponent);

Composant Enfant Location :

render(){
    return(

                 this.requestLocationPermission()}>

                 (this.autoCompleteInput = ref)}
                onEndEditing={this.dismissLoading}
                onChangeText={text => this.googlePlaceAutoCompletion(text)}
                style={Styles.searchbox}
                placeholder="Suburb or postcode"
                />

            {this.alternateHistoryKeywords()}

    )
}

function mapStateToProps(state){
    return {
        updateLocationList: state.taskListReducer.consumerTaskLocationHistoryEvent
    };
}

function mapDispatchtoProps(dispatch){
   return bindActionCreators(actions,dispatch);
}

let SearchLocationContainer = connectEnhance(mapStateToProps,mapDispatchtoProps)(SearchLocationComponent);

L'enfant a besoin des actions du parent à cause de ce code dans le composant enfant qui sauvegarde la valeur de l'entrée de texte

saveToHistory(){
    let here = false
    this.state.searchLocationList.filter((find, index) => {
        if(find.toLowerCase() == this.state.searchLocation.toLowerCase()){
            here = true
        }
    })
    if(here == false){
        this.setState({
            searchLocationList: [this.state.searchLocation, ...this.state.searchLocationList]
        },()=> this.props.consumerTaskLocationHistoryEventAction(this.state.searchLocationList))  //cette action est sur le parent mais pas sur l'enfant
    }
}

Console Logs

Answer 1

Veuillez ne pas utiliser redux pour transmettre des props du parent à l'enfant. Vous devez savoir que vous avez des composants intelligents (connectés au magasin redux) et des composants simples (ne connaissent rien de redux).

Votre code devrait ressembler à ceci

state = {
  lon: 54,002,
  lat: 34,990,
}
render() {
  return (

  );
}

{...this.props} fait de la magie et toutes vos props parent seront transmises à un composant enfant. Connectez simplement redux au composant parent et ajoutez {...this.props} à l'enfant