reactjs 未显示带有React引导的进度条

5kgi1eie 于 2023-02-04 发布在 React

关注(0)|答案(4)|浏览(137)

我试图添加一个进度条用作审查，这真的很奇怪，因为什么都没有显示。
我试着从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;
}

知道为什么什么都不显示吗？我也试着把进度条移到其他地方，但是同样的事情...

reactjs

来源：https://stackoverflow.com/questions/62811667/progress-bar-with-react-bootstrap-is-not-showing-up

4条答案

按热度按时间

u59ebvdq1#

对我来说，这是我的组件中缺少的导入。请尝试在导入中添加以下内容：

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

赞(0）回复(0）举报 2023-02-04

igsr9ssn2#

我遇到了同样的问题，把进度条组件放在一个列里面是我解决这个问题的方法。
所以它不是这样工作的：

<Row>
    <ProgressBar />
</Row>

但它是这样工作的：

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

赞(0）回复(0）举报 2023-02-04

3npbholx3#

尝试更新依赖项。请使用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.

赞(0）回复(0）举报 2023-02-04

xdnvmnnf4#

这为我解决了这个问题，
请确保已安装引导CDN，确保数字和内嵌样式带有{}和{{}}，确保“”仅位于键上，而不在内嵌样式的值上
下面是适用于我的代码：

<span className="progress">
<span className="progress-bar" role="progressbar" aria-valuenow={60} aria-valuemin={0} aria-valuemax={100} style={{width:"50%"}}>
</span>
</span>

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 未显示带有React引导的进度条

4条答案

相关问题

热门标签

最新问答