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

在视图中使用组件的React Code

检查器中包装了组件之一的代码

组件彼此相邻，一个很窄，因为它被包裹了

Answer 1

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