reactjs - React Bootstrap Badge 类未呈现

Question

我是反应开发的新手，我正在测试一个使用 bootstarp 的简单反应网络应用程序

我用 npm 安装了 bootstrap 最新版本，并像这样在我的 index.js 中添加了导入

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

这是我的组件

class Counter extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <React.Fragment>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button className="btn btn-secondary">Increment</button>
      </React.Fragment>
    );
  }

  getBadgeClasses() {
    let classes = "badge m2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

现在按钮类正确呈现，但徽章类不是。

我在这里错过了什么？

标签： reactjsreact-bootstrap

Answer 1

在 Bootstrap 的最新版本 (5.x) 中，需要使用bg-*而不是此处badge-*所述设置上下文徽章。

因此，您需要以下内容：

getBadgeClasses() {
    let classes = "badge m2 bg-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }