将值传递给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中的进度条的主要内容,如果未能解决你的问题,请参考以下文章

React:将值从onClick传递给方法

React js onClick无法将值传递给方法

React js onClick无法将值传递给方法

将值从后面的代码传递给 Jquery 函数

React useContext 不会将值传递给深层嵌套的子级

将值从灯箱传递给父级