无法从React外部在ReactJS组件上设置setState

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似乎是一个不能调用setState()的<div>对象。 我应该如何正确地做到这一点？

Answer 1

组件管理自己的状态。 温度变化是否来自数据库？ 然后，您可能需要在组件的方法内使用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>
        )
    }
});

Answer 2

您需要的是像Redux这样的状态容器： https : //github.com/reactjs/redux

您无需管理每个组件自己的状态，而是可以管理存储中的所有状态。 组件将连接到商店并在其更改时更新。 存储将响应某些操作（可能是AJAX响应）而发生变化，从流或用户操作中接收更多数据。

---

或者，您可以管理组件中组件树的状态，该组件树是所有其他依赖相同状态信息的组件的父级。 然后将相关部分作为道具传递。