将值传递给React和Reactstrap中的进度条
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将值传递给React和Reactstrap中的进度条相关的知识,希望对你有一定的参考价值。
我从来没有使用进度条,所以我试图通过拼凑各种来源并试图让它与React和Reactstrap一起工作来弄清楚。这对我来说似乎有意义,但它不起作用。
这是关于<Progress />
的reactstrap的文档。基本上,它需要一个value
道具所以我试图将它传递给一个方法,以便它可以动态更新,理论上应该使进度条移动。
https://reactstrap.github.io/components/progress/
但是,在我的情况下,条形仅更新为5%,但console.log
确实更新为100。
这是我的组件。我在这做错了什么?
import React, { Component } from 'react';
import {
Progress
} from 'reactstrap';
export default class SectionLoading extends Component {
progressValue() {
let width = 1;
return setInterval(() => {
if (width <= 100) {
console.log(width);
width++;
}
}, 10)
}
render() {
return (
<Progress value={this.progressValue()} />
);
}
}
答案
我认为Progress值应该采用数字而不是函数。所以,你可以尝试将<Progress value={this.progressValue()} />
更改为<Progress value={this.state.width} />
然后在progressValue函数中使用this.setState({ width })
来更新状态。
以上是关于将值传递给React和Reactstrap中的进度条的主要内容,如果未能解决你的问题,请参考以下文章