Javascript 反应组件水平而不是垂直渲染

我试图使用计数器组件动态渲染计数器数组，但是它们是水平渲染的，我需要垂直渲染

我正在关注codewithmosh.com上的react教程。 我已经遵循了所有的说明，并对代码进行了无数次检查。我还想指出，讲师正在使用react和bootstrap的旧版本

counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: this.props.value
  };

  handleIncriment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncriment}
          className="btn btn-secondary btn-sm"
        >
          Incriment
        </button>
      </React.Fragment>
    );
  }

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

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

export default Counter;

import React，{Component}来自“React”；
类计数器扩展组件{
状态={
计数：this.props.value
};
HandleIncrement=（）=>{
this.setState（{count:this.state.count+1}）；
};
render（）{
返回(
{this.formatCount（）}
控告
);
}
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.state.count==0？“警告”：“主要”；
返回类；
}
formatCount（）{
const{count}=this.state；
返回计数===0？“零”：计数；
}
}
导出默认计数器；

Counters.jsx

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]

  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter key={counter.id} value={counter.value} selected={true} />
        ))}
      </div>
    );
  }
}

export default Counters;

从“React”导入React，{Component}；
从“/Counter”导入计数器；
类计数器扩展组件{
状态={
计数器：[
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}
]
};
render（）{
返回(
{this.state.counters.map（counter=>(
))}
);
}
}
导出默认计数器；

如果在

计数器中使用
div
而不是
片段
，则计数器将是块元素，并将垂直渲染