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

@ の定数の代わりに今のところ文字列を使用するだけで、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 に呼び出されていないため、このエラーをどこから開始すればよいかわかりません。ご意見やご提案をいただければ幸いです。ありがとう！

4

1 に答える 1

0

省略したかもしれませんが、両方の例で React をインポートする必要があります。

import React from 'react'
于 2016-09-02T15:57:53.190 に答える