我的 boostrap、徽章未应用是否有问题？

Question

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

索引.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();

计数器.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：徽章 v5.1
• v4.6：徽章 v4.6

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

索引.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'));

计数器.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 添加了一个额外的引导类，以使组件居中：

样式.css：

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

解答你的造型问题。

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

计数器.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 条件渲染条件渲染
• 三元运算符三元运算符
• Hooks 与类组件Hooks
• 钩子简介钩子简介