react.js 的进度条答案

【问题标题】：Progress Bar with react.jsreact.js 的进度条
【发布时间】：2015-08-02 06:04:11
【问题描述】：

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

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 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>

元素设置的初始状态是this

        progressBar:{
            height:'4px',
            background: 'green',
            width:1,
            position:'absolute',
            left:250,
            top: 70
        }

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

编辑：

这是我传递给 browserfy 的文件：

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

完成 MainSocketAction.js：

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

【问题讨论】：

你安装组件了吗？我没有看到它安装在您发布的代码中。
div 在 MainApplication 的渲染函数 @RobM 中。
我想了很多，但我没有看到React.render(x, someNode);
我发布了一个编辑，我浏览了文件，有渲染功能。
@RobM。是的，现在我明白了……

标签： javascript sockets reactjs

【解决方案1】：

这个：

var x = new MainApplication;

正在创建一个新的MainApplication，但它从未被 React 渲染。然后你正在创建另一个（不同的）稍后渲染的。我想你想要这样的东西：

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

【讨论】：