Reagieren: warum untergeordnete Komponente nicht aktualisiert wird, wenn sich die Prop-Änderung ändert

Question

Warum wird im folgenden Pseudo-Codebeispiel Child nicht erneut gerendert, wenn Container foo.bar ändert?

Container { 
    handleEvent() { 
    this.props.foo.bar = 123 
    }, 

    render() { 
    return <Child bar={this.props.foo.bar} /> 
} 

Child { 
    render() { 
    return <div>{this.props.bar}</div> 
    } 
} 

Auch wenn ich forceUpdate() rufen nach dem Wert in Container zu modifizieren, Kind zeigt noch den alten Wert.

Answer 1

Da Kind rerendering nicht, wenn die Requisiten des Mutter ändern, aber wenn sein Zustand ändert :)

Was Sie zeigen, ist dies: https://facebook.github.io/react/tips/communicate-between-components.html

Es Daten von Eltern auf das Kind durch Requisiten passieren aber da gibt es keine render logic.

Sie müssen einen Status für das übergeordnete Element festlegen und dann das untergeordnete Element für den übergeordneten Änderungsstatus erneut rendern. Dies könnte helfen. https://facebook.github.io/react/tips/expose-component-functions.html

Answer 2

Sie sollten setState Funktion verwenden.

Container { 
    handleEvent=() => { // use arrow function 
     //this.props.foo.bar = 123 
     //You should use setState to set value like this: 
     this.setState({foo: {bar: 123}}); 
    }; 

    render() { 
     return <Child bar={this.state.foo.bar} /> 
    } 
    Child { 
     render() { 
      return <div>{this.props.bar}</div> 
     } 
    } 
} 

Ihr Code scheint nicht gültig zu sein. Ich kann diesen Code nicht testen.

Answer 3

Laut React Philosophie Komponente kann nicht seine Requisiten ändern. Sie sollten vom Elternteil erhalten werden und unveränderlich sein. Nur Eltern können die Requisiten ihrer Kinder ändern.

schöne Erklärung auf state vs props

auch, lesen Sie diesen Thread Why can't I update props in react.js?

Answer 4

Verwenden setState Funktion. So könnte man

 this.setState({this.state.foo.bar:123}) 

im Griff Ereignismethode tun.

Sobald der Status aktualisiert ist, werden Änderungen ausgelöst, und es wird erneut gerendert.

Answer 5

Update-Kind-Attribut 'Schlüssel' gleich Namen haben:

Child { 
    render() { 
    return <div key={this.props.bar}>{this.props.bar}</div> 
    } 
}