Javascript - React将我的组件包装在div中

Question

所以我有两个相似的组件，它们有不同的结构但共享相同的css类，但其中一个被React包装在一个div中无缘无故。

两个组件都在同一视图的列表中使用，但由于其中一个组件被包裹在div中，因此该组件的宽度变得很奇怪。

为什么反应将组件包装在一个额外的div中？

这是被包装的组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Card, CardBlock, CardFooter, CardTitle, CardSubtitle, Button, Input     } from 'reactstrap'

class ActiveInvoice extends Component {

  check(selected) {    
    if(!selected){
      this.props.cart.Add({id: this.props.id, amount: this.props.amount}) 
    } 
    else {
      this.props.cart.Remove({id: this.props.id, amount: this.props.amount})     
    }
  }

  render() {
    const { receiver, dueDate, amount, currency, status, id } = this.props
    const selected = this.props.cartReducer.selectedInvoices.find((x) => x     === id) ? true : false
    return (
      <Card className='invoice'>
        <CardBlock onClick={() => this.check(selected)} className={selected ?     'checked' : 'unchecked'}>
          <Input className='selector' type='checkbox' checked={selected}     readOnly/>
          <CardTitle>{receiver}</CardTitle>
          <CardSubtitle className='due'>Förfallodatum {dueDate}    </CardSubtitle>
          <CardSubtitle className='status'>{status}</CardSubtitle>
          <CardTitle className='amount'>{amount} <span className='currency'>    {currency}</span></CardTitle>
        </CardBlock>
        <CardFooter>
          <Button className='pay'>Betala</Button>
          <Button className='details'>Detaljer</Button>
        </CardFooter>
      </Card>
    )
  }
}

export default ActiveInvoice

这个没有被包裹：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Card, CardBlock, CardFooter, CardTitle, CardSubtitle, CardText,     Button } from 'reactstrap'

class InactiveInvoice extends Component {

  render() {
    const { receiver, amount, currency, status, description } = this.props
    return (
      <Card className='invoice inactive'>
        <CardBlock>
          <CardTitle>{receiver}</CardTitle>
          <CardSubtitle className='status teal'>{status}</CardSubtitle>
          <CardTitle className='amount'>{amount} <span className='currency'>    {currency}</span></CardTitle>
          <CardText>{description}</CardText>
        </CardBlock>
        <CardFooter>
          <Button className='details'>Detaljer</Button>
        </CardFooter>
      </Card>
    )
  }
}

export default InactiveInvoice

在视图中使用组件的反应代码

检查员中包含其中一个组件的代码

彼此相邻的组件，一个是狭窄的，因为它被包裹

Answer 1

傻傻的我。为被包装的组件创建了一个容器，该容器将其包装在div中。