我目前正在使用http://materializecss.com/preloader.html 中的Materialize preloader(Indeterminate类型)
所以我目前使用它的方式是：
我的 reduxstate对象看起来像这样：
state = {
...
showProgressBar: true/false
}
现在，当我单击与获取某些 api 对象相关联的按钮时，我会触发一个action使showProgressBar: true和当项目被获取时，在reducerI make it 中showProgressBar: false。
这种切换工作完美。然而，它变得可见和回到不可见之间的时间，preloader只是卡住了。即它不做它的动画。
可能的原因是什么？
因为 this.props 和 this.state 可能会异步更新，所以你不应该依赖它们的值来计算下一个状态。
this.setState((prevState, props) => ({
showProgressBar: !prevState.showProgressBar
}));
请参阅：文档
import 'materialize-css/dist/css/materialize.min.css';
function Preloader() {
return (
<div className="progress">
<div className="indeterminate"></div>
</div>
)
}
import Preloader from '/my-components/preloader`
...
{ this.state.showProgressBar && <Preloader /> }
请参阅：工作示例
你应该使用反应物化
React 的材料设计，由 materializecss 提供支持
import {Preloader} from 'react-materialize'
export default () => (
<Preloader size='small'/>
)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句