Konnte nicht auf ReactJS-Komponente von außerhalb setzen React

Question

Ich arbeite an einer Anwendung, in der ich eine Schnittstelle mit Daten aktualisieren, die in einem Stream eingehen. Ich beginne mit dem Code, der so etwas wie dieses:

var TempDisplay = React.createClass({ 
    getInitialState: function() { 
     return { 
      tempFAA:0.69, 
      tempGGG:1.4, 
      temp03K:3.66, 
      temp60K:58.79, 
      rateFAA:-0.04, 
      rateGGG:-0.0001, 
      rate03K:0.45, 
      rate60K:1.3, 
     } 
    }, 
    render: function() { 
     return(
      <div> 
       <Temp label="60K" color="#d62728" temp={this.state.temp60K} rate={this.state.rate60K} /> 
       <Temp label="03K" color="#2ca02c" temp={this.state.temp03K} rate={this.state.rate03K} /> 
       <Temp label="GGG" color="#ff7f0e" temp={this.state.tempGGG} rate={this.state.rateGGG} /> 
       <Temp label="FAA" color="#1f77b4" temp={this.state.tempFAA} rate={this.state.rateFAA} /> 
      </div> 
     ) 
    } 
}); 

var Instrument = React.createClass({ 
    render: function() { 
     return(
      <div><span style={{color:this.props.color}}>{'\u25C9 '}</span>{this.props.label}</div> 
     ) 
    } 
}); 

var tempDisplay = ReactDOM.render(<TempDisplay />, document.getElementById("tempDisplay")); 

Was es scheint, wie ich jetzt tempDisplay.setState() diese Temperatur zeigt, wenn neue Daten kommt, aber tempDisplay scheint, ist Telefonierens sollte aktualisiert werden ein <div> Objekt, auf dem zu sein setState() kann nicht aufgerufen werden. Wie soll ich das eigentlich machen?

Answer 1

Was brauchen Sie ist ein Zustand Container wie Redux: https://github.com/reactjs/redux

Statt jede Komponente verwalten ihren eigenen Zustand zu haben, wird verwalten Sie alle der Staat im Laden. Die Komponenten stellen eine Verbindung zum Speicher her und aktualisieren sie, wenn sie sich ändert. Der Speicher wird sich als Reaktion auf eine Aktion ändern, bei der es sich um eine AJAX-Antwort handeln kann, die mehr Daten von einem Stream oder einer Benutzeraktion erhält.

---

Alternativ können Sie Zustand für einen Baum von Komponenten in einer Komponente verwalten, die die Mutter aller anderen Komponenten ist, die auf den gleichen Zustand Informationen verlassen. Übergeben Sie dann die relevanten Teile als Requisiten.

Answer 2

Die Komponente verwaltet ihren eigenen Status. Kommen die Temperaturänderungen von einer Datenbank? Dann müssen Sie es möglicherweise mit einem Ajax-Aufruf innerhalb einer Methode der Komponente abfragen.

, die wie (Pseudo-Code) aussehen könnte:

var TempDisplay = React.createClass({ 
    getInitialState: function() { 
     return { 
      tempFAA:0.69, 
      tempGGG:1.4, 
      temp03K:3.66, 
      temp60K:58.79, 
      rateFAA:-0.04, 
      rateGGG:-0.0001, 
      rate03K:0.45, 
      rate60K:1.3, 
     } 
    }, 
    pollTemperature: function(){ 
     $setInterval(function(){ 
     $ajax(... call to API route ...) 
     .then(function(){ 
      this.setState(temps: newTemps) 
     }) 
     } 
    } 
    render: function() { 
     return(
      <div> 
       <Temp label="60K" color="#d62728" temp={this.state.temp60K} rate={this.state.rate60K} /> 
       <Temp label="03K" color="#2ca02c" temp={this.state.temp03K} rate={this.state.rate03K} /> 
       <Temp label="GGG" color="#ff7f0e" temp={this.state.tempGGG} rate={this.state.rateGGG} /> 
       <Temp label="FAA" color="#1f77b4" temp={this.state.tempFAA} rate={this.state.rateFAA} /> 
      </div> 
     ) 
    } 
});