Question

我正在尝试将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>
        );
    }
}

非常靠近examples容器，现在只使用字符串而不是@ DropTarget中的常量。 getBuilders只是渲染其他组件。 我在创建DragSource组件之前运行此组件，一切运行正常。

所以，有几个组件我只是将反应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上，所以我不知道从哪里开始这个错误。任何意见或建议将不胜感激。谢谢！

Answer 1

也许您省略了它，但您应该在两个示例中导入React：

import React from 'react'

React / Redux / ReactDnd - 错误：removeComponentAsRefFrom

1 个答案: