React-dnd: يتم أيضًا عرض مكون connectDragPreview () كمكون عادي

تم إنشاؤها على ٢٨ مايو ٢٠١٧ · 3تعليقات · مصدر: react-dnd/react-dnd

ربما هذا هو نسخة مكررة من https://github.com/react-dnd/react-dnd/issues/399.
ربما يكون هذا سلوكًا معروفًا ، ولكنه سيكون جيدًا إذا أمكن تحقيق ما يلي:

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

        return (
            <div className='top'>
                <div>Ordinary</div>
                {connectDragSource (<div>Dragabble</div>)}
                {connectDragPreview (<div>my preview</div>)}
            </div>
        );
}

أريد أن يتم عرض مكون المعاينة الخاص بي فقط كمعاينة فعلية ، وليس كمكون عادي.
ولكن هذا يظهر <div>my preview</div> أسفل المكون الفعلي القابل للسحب داخل div "العلوي". لا أريد أن يتم عرضه هناك ، ولكن فقط كمعاينة. هل يمكن تحقيق ذلك؟

wontfix

مصدر

croraf

ال 3 كومينتر

ها هو (استخدم طبقة السحب المخصصة):
https://github.com/react-dnd/react-dnd/blob/master/examples/02٪20Drag٪20Around/Custom٪20Drag٪20Layer/CustomDragLayer.js

وهذا هو الجزء المناسب من الكود:

import { getEmptyImage } from 'react-dnd-html5-backend';

componentDidMount() {
    // Use empty image as a drag preview so browsers don't draw it
    // and we can draw whatever we want on the custom drag layer instead.
    if (this.props.connectDragPreview) {
      this.props.connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      });
    }
  }