Javascript 带有react.js的进度条

我试图实现一个进度条，但react似乎不喜欢这个想法。我明白了

警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止的

作为一个错误，尽管在调用函数时安装了元素。代码如下：

SocketAction.js

var x = new MainApplication;
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
    x.showProgress(event);
});

MainApplication.js

showProgress(e){
    console.log(window.performance.now());
    this.setState({
        progressBar:{
            height:'4px',
            background: 'green',
            position:'absolute',
            left:250,
            top: 70,
            width: e + '%'
        }
    })
},

ProgressBar位于MainApplication.js中：

<div style={this.state.progressBar}></div>

我不明白为什么它不应该安装

编辑：

这是我传递给browserfy的文件：

import MainApplication from './project/MainApplication';
import MainSocketActions from './project/MainSocketActions';
React.render(<MainApplication />, document.getElementById('content'));

这：

正在创建一个新的

main应用程序

，但它从未由React呈现。然后，您将创建另一个（不同的）稍后渲染的对象。我想你想要的是：

var x = React.render(<MainApplication />, document.getElementById('content'));
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
    x.showProgress(event);
});

var x=React.render（，document.getElementById（'content'）； window.socket.on（'label-downloads:Shipping\\Events\\ShippingProgress'，函数（事件）{ x、 展示进度（活动）； });

---

您是否安装了该组件？我没有在你发布的代码中看到它。div在MainApplication的render函数@RobM中。我也这么认为，但我没有看到

React.render（x，someNode）我发布了编辑，我浏览了文件，还有渲染功能。@RobM。是的，现在我明白了。。。
import MainApplication from './MainApplication';
var x = new MainApplication;

    window.socket = io('http://localhost:3000');
    window.socket.on('connect', function () {
    });
    window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
        x.showProgress(event);
    });

var x = new MainApplication;

var x = React.render(<MainApplication />, document.getElementById('content'));
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
    x.showProgress(event);
});