引导程序不适用于 React

Posted 2023-02-22

【中文标题】引导程序不适用于 React

【英文标题】：Bootstrap not working with React

【发布时间】：2019-02-03 09:16:57

【问题描述】：

我正在尝试将 Bootstrap 属性应用于我的 <span> 和 <button>。我不确定我做错了什么。我已经在***中搜索了这个问题，但是所有的建议都说将类更改为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 了吗？ ***.com/a/44985246/885626

我现在有。它正在工作。感谢 Ric 的建议！

【参考方案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() 增量 );