Как я могу позволить этим компонентам карты полностью покрыть пустое пространство?

Question

Когда я отрисовываю этот компонент БЕЗ обертки тега 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>
);

Тем не менее, для того, чтобы использовать response-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

Answer 1

Я смог решить эту проблему путем рефакторинга (не уверен, что это слово) файла Hoop.js немного больше. Я удалил из компонента и сделал его целью падения. Затем я был в состоянии а) вернуться без окружающего тега 'div' и б) сделал цель отбрасывания, которая была моим первоначальным намерением в любом случае

Конечный результат:

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