引导程序不适用于 React答案

【问题标题】：Bootstrap not working with React引导程序不适用于 React
【发布时间】：2019-02-03 09:16:57
【问题描述】：

我正在尝试将 Bootstrap 属性应用于我的 <span> 和 <button>。我不确定我做错了什么。我已经在stackoverflow中搜索了这个问题，但是所有的建议都说将类更改为className。我已经这样做了，但我仍然无法看到我的风格发生变化。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Counter from './components/counter';

ReactDOM.render(<Counter/>, document.getElementById('root'));
registerServiceWorker();

counter.jsx

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <span className="badge badge-primary m-2">
                    {this.formatCount()}
                </span>
                <button className="btn btn-secondaty btn- 
sm">Increment</button>
            </div>
        );
    }
    formatCount() {
        const { count } = this.state;
        return count === 0 ? 'Zero' : count;
    }
} 

export default Counter;

任何对此问题的见解将不胜感激。

【问题讨论】：

你导入 CSS 了吗？ stackoverflow.com/a/44985246/885626
我现在有。它正在工作。感谢 Ric 的建议！

标签： reactjs bootstrap-4

【解决方案1】：

假设您已经安装了 Bootstrap，然后将这个 import 语句添加到您的代码中：

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

【讨论】：

【解决方案2】：

在 bootstrap v5 中，它改为 "bg-primary" 和 "bg-secondary" 等，所以试试 className="badge bg-primary m-2"。

【讨论】：

【解决方案3】：

请检查 bootstrap 的版本，badge 类变化不大。

根据Bootstrap v5.0及以上，Badge类使用如下代码。

渲染（）{ 返回（ {this.formatCount()} 增量 );

【讨论】：