Question

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

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;

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>

Answer 2

您可以添加以下样式以垂直查看：

   <div style={{ display: "flex", flexDirection: "column" }}>
      <Counter />
      <Counter />
      <Counter />
      <Counter />
    </div>

为什么我的 React 组件在水平方向渲染而不是垂直渲染？

2 个答案: