我正在尝试实现一个进度条,但 React 似乎不喜欢这个想法。我明白了
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.
作为一个错误,尽管该元素是在函数被调用时挂载的。这是代码:
SocketAction.js
var x = new MainApplication;
window.socket.on('label-downloads:Shipping\\Events\\ShippingProgress',function(event){
x.showProgress(event);
});
主应用程序.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>
元素的设置初始状态是这样的
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);
});
最佳答案
这个:
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);
});
关于javascript - 使用 react.js 的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30359028/