0

我正在尝试将 React DnD 的基本示例应用于我的项目（作为概念证明）并且遇到了一些问题。我正在使用这个例子 - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive。它只是让你在一个盒子里拖动一些 div。

所以我有一个外部组件（注意：这是实际拖动组件的几个组件级别），它基本上是整个页面（这只是为了测试 POC），看起来像这样：

 import { DropTarget, DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const boxTarget = {
    drop(props, monitor, component) {
        const item = monitor.getItem();
        const delta = monitor.getDifferenceFromInitialOffset();
        const left = Math.round(item.left + delta.x);
        const top = Math.round(item.top + delta.y);

        component.moveBox(item.id, left, top);
    }
};

// eslint-disable-next-line new-cap
@DragDropContext(HTML5Backend)
// eslint-disable-next-line new-cap
@DropTarget('CLA_DRAG', boxTarget, (connect) => ({
    connectDropTarget: connect.dropTarget()
}))
export default class GenericPlatformComponent extends React.Component {
    ...

    render() {
        const { connectDropTarget } = this.props;

        return connectDropTarget(
            <div>
                {this.getBuilders()}
            </div>
        );
    }
}

非常接近示例容器，现在只使用一个字符串而不是 @ 中的那个常量DropTarget。getBuilders 只是在里面渲染其他组件。我在创建 DragSource 组件之前运行了这个组件，一切都运行良好。

因此，我只是将 React DnD 语法添加到我想要可拖动的组件中，如下所示：

 import { DragSource } from 'react-dnd';

 const boxSource = {
    beginDrag(props) {
        const { id, left, top } = props;

        return { id, left, top };
    }
 };

// eslint-disable-next-line new-cap
@DragSource('CLA_DRAG', boxSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
}))
export default class SearchResult extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { connectDragSource } = this.props;

        return connectDragSource(
            <div key={this.props.key}>
                    <Row>
                        <Col xs={2} sm={2} md={1} lg={1} >
                            <div style={tempThumbnail}>
                                Picture Here
                            </div>
                        </Col>
                        <Col xs={10} sm={10} md={11} lg={11} >
                            <DescriptionBlock result={this.props.result} {...this.props} />
                        </Col>
                    </Row>
            </div>
        );
    }
}

所以有了这一切，我在控制台上收到了这个错误（应用程序也在停止渲染）。

bundle.js:29605 Uncaught (in promise) Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: react-refs-must-have-owner).(…)

奇怪的是，dragsource 甚至还没有被调用到 dom 上，所以我不知道从哪里开始出现这个错误。任何意见或建议将不胜感激。谢谢！

4

1 回答 1

0

也许你省略了它，但你应该在你的两个例子中导入 React：

import React from 'react'
于 2016-09-02T15:57:53.190 回答