0

当我在没有包装“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>
);

但是，为了使用 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？我正在使用语义 UI 的网格布局。

编辑：你可以在这里看到整个组件系统 --> https://github.com/ammark47/PersonalWebsite/tree/master/src/components

4

1 回答 1

0

我能够通过重构（不确定是否是这个词）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>
        );
    }
}
于 2017-01-10T19:58:11.700 回答