Не удается установитьState on ReactJS-компонент извне React

Question

Я работаю над приложением, в котором я обновляю интерфейс с данными, которые поступают в поток. Я начинаю с кодом, который является чем-то вроде этого:

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")); 

Что мне кажется, что я должен сделать теперь вызов tempDisplay.setState() обновлять эти температурные дисплеи всякий раз, когда новые данные приходит, но tempDisplay кажется <div> объект, на котором setState() не может быть вызван. Как я должен правильно это делать?

Answer 1

Что вам нужно, это состояние контейнера, как Redux: https://github.com/reactjs/redux

Вместо того, чтобы каждый компонент управления своим собственным состоянием, вы будете управлять всеми состояние в магазине. Компоненты будут подключаться к хранилищу и обновляться при его изменении. Магазин изменится в ответ на некоторые действия, которые могут быть ответом AJAX, получая больше данных от потока или действия пользователя.

---

В качестве альтернативы, можно управлять состоянием для дерева компонентов в качестве компонента, который является предком всех других компонентов, которые опираются на ту же информацию о состоянии. Затем пропустите соответствующие части в качестве реквизита.

Answer 2

Компонент управляет собственным состоянием. Являются ли изменения температуры в базе данных? Тогда вам может потребоваться опросить его с помощью вызова ajax в рамках метода компонента.

Это может выглядеть следующим образом (псевдо-код):

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> 
     ) 
    } 
});