我的引导程序有问题，徽章不适用吗？

Question

现在我正在学习如何使用 ReactJS，但由于某种原因，我的引导程序无法在我的 .jsx 文件中运行。我正在关注一个教程（MOSH），我遵循了 T 的所有内容，甚至搜索了整个堆栈溢出，什么也没有。有人和我有同样的问题，他们通过导入 CSS 解决了这个问题。我尝试做同样的事情，但什么也没做。我试图在按钮旁边获得一个徽章，按钮显示但徽章不显示。我什至尝试多次安装引导程序，但没有骰子。

index.js：

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

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


    reportWebVitals();

counter.jsx：

    import React, { Component } from "react";

    class Counter extends Component {
    state = {
        count: 0,
        
    };  

    render() {
        return (
            <div>
            
                <span className = "badge badge-primary">{this.formatCount()}</span>
                <button>Increment</button>
            </div>
        );
    }

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

export default Counter;

Answer 1

我注意到的问题是您为徽章使用了不正确的引导类名称，因为您可能已经安装了最新版本的引导程序（引导程序 v5.1）。您的徽章将适用于较旧的引导程序版本（v4.6）。因此，要解决此问题，请尝试使用：className = "badge bg-primary"，否则您必须降级引导版本。

• 引导 v5.1：<span className = "badge bg-primary"></span>
• bootstrap v4.6（或以下）：<span className = "badge badge-primary"></span>

请点击以下链接获取 bootstrap v5.1 和 v4.6 的文档：

• v5.1：Badges v5.1
• v4.6：Badges v4.6

此外，我运行了您的代码，但没有获得预期的功能： 这里我建议一个更简单的计数器方法：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Counter from './Counter.jsx';

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

Counter.jsx

import React, { useState } from "react";

function Counter(){
    let [count, setCount] = useState(0);

    return (
        <div className="container">
            <span className = "badge bg-primary">{formatCount()}</span>
            <button className="btn btn-success" onClick ={increase}>Increment</button>
        </div>
    );

    function increase(){
        setCount(count + 1);

    }

    function formatCount(){
        return (count === 0 ? 'Zero' : count);
         }
    
}

export default Counter;

我为按钮和自定义 CSS 添加了一个额外的引导类以使组件居中：

styles.css：

 .container {
    text-align: center;
    margin: 20% auto;
}

回答您的样式问题。

• 使用三元运算符根据“count”的值选择引导类。它将选择引导类“badge bg-warning”或“badge bg-primary”，具体取决于计数等于0还是计数不等于0。

Counter.jsx

 import React, { useState } from "react";

function Counter(){
    let [count, setCount] = useState(0);

    return (
        <div className="container">
            <span className = {count === 0 ? "badge bg-warning" : "badge bg-primary"}>{formatCount()}</span>
            <button className="btn btn-success" onClick ={increase}>Increment</button>
        </div>
    );

    function increase(){
        setCount(count + 1);

    }

    function formatCount(){
        return (count === 0 ? 'Zero' : count);
         }
    
}

export default Counter;

• 其他代码与之前保持一致。

请参考以下链接：

• React 条件渲染Conditional rendering
• 三元运算符Ternary operator
• 钩子与类组件Hooks
• 钩子简介Intro to hooks