Ändern Sie den Status der React-Komponente von altem externem Javascript?

Question

Wie kann ich den Status einer React-Komponente von meinem alten Legacy-Code von jQuery ändern?

Ich habe eine Komponente wie folgt aus:

var AComponent = React.createClass({ 
    getInitialState: function() { 
    return { ids: [] } 
    }, 
    render: function() { 
    ... 
    }, 
    onButtonClick: function() { 
    ids.splice(…); // remove the last id 
    } 
}); 

Wenn etwas Besonderes geschieht in der alten Suppe Code jQuery, würde Ich mag eine id AComponent.state.ids zu schieben. Wie kann ich das machen?

Eine "offensichtliche" Lösung ist ein Anti-Pattern; hier ist es:

var componentInstance = AComtonent({}); 
React.renderComponent(componentInstance, document.getElementById(...)); 

// Somewhere else, in the jQuery soup. Something special happens: 
componentIntance.state.ids.push(1234); 
componentIntance.setState(componentInstance.state); 

Dies ist ein Antipattern, nach this email from a Facebook developer, weil er schreibt, dass componentInstance zerstört werden könnten durch Reagieren.

Answer 1

Ich würde die Komponente statuslos machen. Speichern Sie das Array ids außerhalb Ihrer Komponente und übergeben Sie es als Prop mit Funktionen, die das Array ändern. Siehe Beispiel zu JSFiddle: http://jsfiddle.net/ohvco4o2/5/