Aktualisieren der untergeordneten Komponente über die Änderung von Requisiten aus dem übergeordneten Element in React

Question

Ich habe eine Komponente, deren Status als Property an eine untergeordnete Komponente übergeben wird. Ich habe festgestellt, dass die Child-Komponente nicht neu gerendert wird, selbst wenn der Status des Parents geändert wird.

auf der offiziellen Basierend Reagieren Dokumentation shouldComponentUpdate zur Nutzung:

„Das erste Mal, wenn die innere Komponente gerendert wird, wird es. {Foo: ‚bar‘} als Wert prop Wenn der Benutzer klickt Auf dem Anker wird der Status der übergeordneten Komponente auf {value: {foo: 'barbar' }} aktualisiert, was den Prozess des erneuten Renderns der inneren Komponente auslöst, der {foo: 'barbar'} erhält neuer Wert für die Requisite

Das Problem ist, dass seit dem p arent und innere Komponenten teilen sich einen Verweis auf das gleiche Objekt, wenn das Objekt in Zeile 2 der onClick Funktion mutiert wird, wird die prop die innere Komponente geändert haben. Also, wenn der Neu-Rendering-Prozess gestartet wird und sollte componentUpdate aufgerufen wird, wird this.props.value.foo gleich nextProps.value.foo sein, da in der Tat this.props.value das gleiche Objekt wie verweist nextProps.value.

Demzufolge kann, da wir die Änderung auf der Stütze vermissen und kurze Schaltung die Wieder Rendering-Prozess, wird die UI nicht von ‚bar‘ aktualisiert werden zu ‚Barbar‘.“

wenn ich nicht shouldComponentUpdate verwenden können, wie würde ich das Kind Komponente zwingen, aus dem Eltern auf der Grundlage einer Änderung von Requisiten rerender?

geordnete Komponente

ich das Kind Komponente basiert wollen auf der boolean rerender gegeben zu showDropzone.

 <Dropzone 
     onDrop={this.onDrop} 
     clearFile = {this.clearFile} 
     showDropzone = {this.state.filePresent}/> 

Kinder Komponente

export default class Dropzone extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { onDrop } = this.props; 
    const {showDropzone} = this.props; 
    const {clearFile} = this.props; 

    return (
     <div className="file-adder"> 
      <div className="preview"> 
      {{showDropzone}? 
      <Dropzone 
       onDrop={onDrop} 
       ref="dropzone"> 
      </Dropzone>   
      :<button type="button" 
      className="btn btn-primary" 
      onClick={clearFile}> 
      Clear File</button>} 
     </div> 
    </div> 
    ); 
    } 
} 

Answer 1

In geordnete Komponente haben Sie "showZone" anstelle von "showDropzone" verwendet.

Danke