Elternkomponente von Kindkomponente aktualisieren

Question

Ich kann nicht die Elternkomponente aus der Kindkomponente neu übergeben - ich übergebe componentDidMount als Requisiten an Kindklasse, dann rufe ich es dort an und erwarte, dass das Elternteil neu zu rendern. Die Renderfunktion wird aufgerufen, der Inhalt bleibt jedoch unverändert. Was ist los mit dir?

var Parent = React.createClass({ 
    getInitialState: function() { return {content: 'clean'}; }, 
    componentDidMount: function() { 
     this.setState({content: 'changed!'}); 
    }, 
    render: function() { 
     return React.createElement('div', {rerender: this.componentDidMount.bind(this)}, this.state.content); 
    } 
}); 

var Child = React.createClass({ 
    render: function() { 
     return React.createElement('div', {onClick: this.handleClick}, 'click me'); 
    }, 
    handleClick: function() { 
     this.props.rerender(); 
    } 
}); 

ReactDOM.render(
     React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory}, 
       React.createElement(ReactRouter.Route, {path: '/parent', component: Parent}) 
     ) 
, document.getElementById('content')); 

Answer 1

componentDidMount() ist eine Lebenszyklusfunktion, die aufgerufen wird, wenn die Komponente das Rendern abgeschlossen hat.

Aufruf es scheint, als ob Sie den gesamten Neuaufstellungsprozess umgehen.

Sie sollten stattdessen Ihre eigene Funktion erstellen.

changeContent: function() { 
     this.setState({content: 'changed!'}); 
    }, 

Und dann passieren changeContent()-rerender.

Vermeiden Sie im Allgemeinen die LifeCycle-Methoden von React!

Answer 2

Um all diese Dinge anzugehen, haben die Jungs von Facebook ein unidirektionales Datenflussmuster entwickelt. Ihre Kindkomponente sollte nichts über den Elternteil wissen, aber sie sollte einen Zustand ändern (Flux, Redux, Reflux). Änderungen am Status führen zu einem erneuten Rendering der übergeordneten Komponente.