React bootstarp Badge类未呈现
React bootstarp Badge类未呈现
提问于 2021-05-12 22:30:11
我是react开发的新手，我正在测试一个使用bootstarp的简单的react web应用程序
我用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;现在按钮类可以正确呈现了，但是badge类却不能。
我是不是漏掉了什么？
回答 2
Stack Overflow用户
发布于 2021-08-03 22:44:58
在Bootstrap的最新版本(5.x)中，需要使用bg-*设置上下文标记，而不是像here那样使用badge-*。
因此，您需要以下内容：
getBadgeClasses() {
let classes = "badge m2 bg-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
}Stack Overflow用户
发布于 2021-07-26 18:01:39
您需要绑定函数：
constructor(props) {
super(props);
this.state = {count: 0};
// This binding is necessary to make `this` work in the callback
this.getBadgeClasses= this.getBadgeClasses.bind(this);
this.formatCount= this.formatCount.bind(this);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67505667
复制相关文章
相似问题
腾讯云开发者
