带有react-bootstrap的进度条没有显示

Question

我正在尝试添加一个进度条用作评论，这真的很奇怪，因为没有显示任何内容。

我尝试从react-bootstrap 中复制/粘贴示例，但它根本不起作用。我也尝试了material-ui，但同样的事情......

我不明白为什么，我并没有使用它作为一种奇怪的方式。

<Col>
                        <Row className="review-summary">
                            <p> 5 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 4 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 3 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 2 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 1 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                    </Col>

CSS 是：

.review-summary {
    display: inline-flex;
}

.review-summary p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #ff7255;
}

.review-summary-progress {
    color: #ff7255;
}

知道为什么没有显示任何内容吗？我也尝试将进度条移到其他地方，但同样的事情......

Answer 1

尝试更新您的依赖项。要么使用npm或yarn.

npm update react-bootstrap@latest --save-dev

另一种调试方法是设置您的now值，该值是显示栏当前进度的数字，例如。now={50}:

<ProgressBar striped variant="success" now={50} active="true" label=`${uploadPercentage}%`} value={`${uploadPercentage}`}/>

更多细节。