Reactstrap 进度不渲染答案

【问题标题】：Reactstrap Progress not renderingReactstrap 进度不渲染
【发布时间】：2019-07-04 05:03:41
【问题描述】：

我正在尝试使用 reactstrap@7.1.0 渲染进度条和按钮。在未呈现进度条的地方呈现按钮。我错过了什么？引导版本也是 4.2.1。

import React from 'react';
import { Progress,Button } from 'reactstrap';

const Home = (props) => {
  return (
    <div>
    <Button color="danger">Danger!</Button>
    <div className="text-center">25%</div>
    <Progress value="25" />
    here i am 


  </div>
  );
};

export default Home;

呈现以下 HTML 代码

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>

【问题讨论】：

组件是显示在控制台的 React 选项卡中还是显示在 DOM 树中？
@Treycos 是的。它显示在反应选项卡中
在生成的 HTML 上使用元素检查器时，是否有任何 CSS 规则隐藏您的组件或将其宽度/长度设置为 0？
@Treycos 没有。它与 propTypes 有什么关系吗？因为它是写在文档中的。
您是否在控制台打印出警告说您的组件的 propTypes 失败？

标签： reactjs reactstrap

【解决方案1】：

错过了在索引文件中导入引导程序

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

【讨论】：