ReactJS: So rufen Sie SetState() eines Elternteils von this.props.children auf?

Question

Ich habe eine übergeordnete Komponente, die durch die Reaktion Router verwendet wird, mit einer Funktion macht ähnlich wie:

render() { 
     return (
      <Grid> 
       <Breadcrumb> 
        {this.state.breadcrumbs} 
       </Breadcrumb> 
       {this.props.children} 
      </Grid> 
     ); 
    } 

Und eines der Kinder versuchen, zu holen() einige JSON. Dieser JSON wird einige zusätzliche Informationen enthalten, die ich die this.state.breadcrumbs der Eltern aktualisieren möchte, aber ich bin mir nicht sicher, wie dies zu erreichen ist.

Answer 1

Versuchen Sie folgendes ...

Geordnete Komponente

updateState(newState){ 
    this.setState({ 
    breadcrumbs: newState, 
    }) 
} 

render() { 
    var childrenwithProps = React.Children.map(this.props.children, function (child){ 
    return React.cloneElement(child, { 
     updateParentState: this.updateState 
    }) 
    }) 
     return (
      <Grid> 
       <Breadcrumb> 
        {this.state.breadcrumbs} 
       </Breadcrumb> 
       {childrenwithProps} 
      </Grid> 
     ); 
    } 

Kinder Komponente

fetch() 
.then() 
.then(function(data){ 
    this.props.updateParentState(data) 
}) 

die Funktion übergeben, die den Zustand der Eltern als Stütze ändern zu den Kindern. Rufen Sie vom Kind aus diese Funktion mit this.props.updateState mit dem neuen Status als Parameter auf. Dadurch wird der Status des übergeordneten Elements aktualisiert.

Ich hoffe, es hilft.