react-bootstrap 的进度条未显示

Posted 2023-02-22

【中文标题】react-bootstrap 的进度条未显示

【英文标题】：Progress bar with react-bootstrap is not showing up

【发布时间】：2020-10-29 20:38:30

【问题描述】：

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

我尝试从 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;

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

【问题讨论】：

你能提供一个小提琴吗？

从 'react-bootstrap/ProgressBar' 导入 ProgressBar 请查看链接react-bootstrap.github.io/components/progress

这就是为什么它不起作用***.com/questions/54618081/…

【参考方案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`/>

More details.

【参考方案2】：

我遇到了同样的问题，将进度条组件放置在列中对我来说是解决问题的方法。

所以它不是这样工作的：

<Row>
    <ProgressBar />
</Row>

但它的工作原理是这样的：

<Row>
   <Col>
       <ProgressBar />
   </Col>
</Row>

【参考方案3】：

对我来说，这是我的组件中缺少的导入。 尝试在您的导入中添加它：

import 'bootstrap/dist/css/bootstrap.min.css';