0

目前我正在关注 Mosh 的 React Tutorial，他想在其中使用badge badge-primaryspan 标签。

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <React.Fragment>
        <span className="badge badge-primary">{this.formatCount()}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }
  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}
export default Counter;

index.js 文件看起来像这样

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.css";
import Counter from "./components/counter";

ReactDOM.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>,
  document.getElementById("root")
);
reportWebVitals();

Bootstrap 实际上正在工作，因为我可以看到网站正在发生变化。但是从它在引导程序网站上的外观来看，它应该变成蓝色，但我的文字只是变得不可见（必须标记它才能使其可见） 引导错误

我究竟做错了什么？

4

2 回答 2

0

badge badge-primary来自 Bootstrap v4。试试badge bg-primary吧，它来自 Bootstrap v5（当前版本）。node_modules您可以从文件夹 >bootstrap文件夹 >检查 Bootstrap 版本package.json

于 2021-12-15T20:46:52.323 回答
0

该类的字体颜色是白色，这就是为什么当你应用它时它会消失......我假设打算让按钮带有文本“增量”，然后是徽章相邻。您只需将按钮包裹在 span 元素周围并将主按钮类应用于该按钮（蓝色）

      <React.Fragment>
        <button className="btn btn-primary">
        Increment <span className="badge badge-light">{this.formatCount()}</span>
        </button>
     </React.Fragment>
于 2021-08-13T01:26:56.567 回答