これらのカードコンポーネントが空白を完全に覆うようにするにはどうすればよいですか？

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」でそれをラップする必要があります。 divタグを適用すると、元のサイズの75％に縮小されます。

この^コンポーネントの名前はフープです。ここでレンダリングされているのがわかります。

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

どのようにして、フープが親のdivを完全に埋めるようにすることができますか？私はセマンティックUIのグリッドレイアウトを使用しています。

編集：あなたがここにコンポーネント全体のシステムを見ることができます - >https://github.com/ammark47/PersonalWebsite/tree/master/src/components

Answer 1

私は（それが単語であるかどうかわからない）リファクタリングによってこの問題を解決することができたHoop.jsはもう少しファイル。私はコンポーネントから削除し、ドロップターゲットにしました。私は、周囲の「divの」タグのないことa）のリターンを次いで、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> 
     ); 
    } 
}