如何让这些卡片组件完全覆盖空白区域？答案

【问题标题】：How can I allow these card components to cover the white space completely?如何让这些卡片组件完全覆盖空白区域？
【发布时间】：2017-01-11 03:58:11
【问题描述】：

当我渲染这个组件时没有包装“div”标签时，用户界面可以正常工作。

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>
);

但是，为了使用 react-drag-and-drop，我必须将它包装在一个“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

【问题讨论】：

可以把列类的css贴在这里吗？

标签： css reactjs semantic-ui react-dnd

【解决方案1】：

我能够通过重构（不确定是否是这个词）Hoop.js 文件来解决这个问题。我从组件中删除并使其成为放置目标。然后，我能够 a) 在没有周围的 'div' 标签的情况下返回 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>
        );
    }
}

【讨论】：