如何讓這些卡組件完全覆蓋空白空間？

Question

當我渲染這個組件時，沒有包裝'div'標籤，UI工作正常。

Hoop.js 
return connectDropTarget(
      <div className="column"> <--works fine if I take this guy out 
       <Card > 
        <Image src={basketball_hoop}/> 
        <Card.Content> 
         <Card.Header> 
          Matthew 
         </Card.Header> 
         <Card.Meta> 
         <span className='date'> 
          Joined in 2015 
         </span> 
         </Card.Meta> 
         <Card.Description> 
          Matthew is a musician living in Nashville. 
         </Card.Description> 
        </Card.Content> 
        <Card.Content extra> 
         <a> 
          <Icon name='user'/> 
          22 Friends 
         </a> 
        </Card.Content> 
       </Card> 
      </div> 
); 

然而，爲了使用，以恢復由於某種原因發生反應拖動和拖放我不得不把它包在一個「格」。當我應用div標籤時，它縮小到原始尺寸的75％。

^組件的名稱是Hoop。你可以在這裏看到它。

ParentOfHoop.js 
return (
      <div className="ui equal width grid"> 
       <Card.Group className="equal width row"> 
        <Hoop isOver=""/> 
        <Hoop isOver=""/> 
        <Hoop isOver=""/> 
       </Card.Group> 
      </div> 
     ); 

我該怎麼做才能讓Hoop完全填滿它的父div？我正在使用Semantic UI的網格佈局。

編輯：你可以在這裏看到整個組件系統 - >https://github.com/ammark47/PersonalWebsite/tree/master/src/components

Answer 1

我能夠通過重構解決這個（不知道如果是這樣的話）的Hoop.js文件多一點。我從組件中刪除，並將其作爲放置目標。當時我能夠一）周圍無「格」標籤返回和b）可這是我的初衷無論如何放置目標

最終結果：

Hoop.js 
class Hoop extends React.Component { 
render() { 

    return (
      <Card className="column"> 
changed this--> <TargetHoop isOver="" projectname="www.squadstream.com"/> 
       <Card.Content> 
        <Card.Header> 
         Matthew 
        </Card.Header> 
        <Card.Meta> 
        <span className='date'> 
         Joined in 2015 
        </span> 
        </Card.Meta> 
        <Card.Description> 
         Matthew is a musician living in Nashville. 
        </Card.Description> 
       </Card.Content> 
       <Card.Content extra> 
        <a> 
         <Icon name='user'/> 
         22 Friends 
        </a> 
       </Card.Content> 
      </Card> 
    ); 
} 

}

TargetHoopImage.js （新的拖放目標）

const hoopTarget = { 
    canDrop(props) { 
     return {} 
    }, 

    drop(props) { 
     console.log(props.projectname); 
    } 
}; 

function collect(connect, monitor) { 
    return { 
     connectDropTarget: connect.dropTarget(), 
     isOver: monitor.isOver() 
    }; 
} 

class TargetHoop extends React.Component { 
    render() { 

     const {connectDropTarget, isOver} = this.props; 
     return connectDropTarget(
      <div> 
       <Image src={basketball_hoop}/> 
      </div> 
     ); 
    } 
}