reactjs - 为什么我的反应组件在水平方向呈现而不是垂直呈现？

Question

我试图在另一个名为“计数器”的组件中多次渲染我的计数器组件，但是当我渲染它时，它以水平方式渲染，但在本教程中，我正在关注它以垂直方式渲染。

import React, { Component } from 'react';

import Counter from './counter';
class Counters extends Component {
    
    render() { 
        return ( 
            <div>
                <Counter/>
                <Counter/>
                <Counter/>
                <Counter/>
            </div>
          
         );
    }
}
 
export default Counters;

这是计数器代码

import React, { Component } from 'react';

class Counter extends Component {
   state={
       count:0,
       tags:["tag1","tag2","tag3"]
   };

   handleIncrement=product=>{
       console.log(product)
       this.setState({count:this.state.count +1})
   }
    render() { 

        
        return (
        <React.Fragment>
            <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
            <button onClick={()=>this.handleIncrement("Mobile Phone")}className="btn btn-secondary btn-sm m-3">Increment</button>
           
        </React.Fragment>
          );

         
    }
    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += (this.state.count) === 0 ? "warning" : "primary";
        return classes;
    }

     formatCount(){

              return this.state.count===0?"Zero":this.state.count;
          }
}
 
export default Counter;

标签： reactjs

Answer 1

这很简单。只需更改<React.Fragment>为<div>

  <div>
    <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
    <button onClick={()=>this.handleIncrement("Mobile Phone")} className="btn btn-secondary btn-sm m-3">Increment</button>             
  </div>