React-dnd: كيف يمكن تغيير حجم المعاينة بناءً على العنصر المسحوب الحقيقي؟

ابحث في وثائق DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

مرحبًا ، لدي مشكلة مماثلة - أريد إعطاء صورة لمعاينة السحب والتفاعل مع dnd يجعلها كبيرة جدًا - حاولت تعيين حجم الصورة مع العرض / الارتفاع والنمط. w / h قبل المرور إلى connectDragPreview بدون أي تأثير. قمت بتمشيط الوثائق ولم تتمكن من العثور على أي ذكر لتغيير حجم صورة المعاينة. يتم دفن عنصر html الفعلي الذي يعرض الصورة في هذه الحالة في عمق مكون مكتبة بحيث لا يمكن الوصول إليه بسهولة أيضًا ، لذلك سيكون الحل الأكثر وضوحًا هو ما إذا كان connectDragPreview / dragPreview قد يعرض خيار تغيير الحجم (أو حتى يحترم حجم مرت الصورة).

إليك بعض التعليمات البرمجية غير العاملة - لا يكون لتعيين عرض الصورة وارتفاعها أي تأثير ، سواء في وظيفة التحميل أو في وظيفة setDragImage:

componentDidMount = () => {
this.setDragImage () ،
} ؛

componentDidUpdate = () => {
this.setDragImage () ،
} ؛

setDragImage = () => {
صورة ثابتة = صورة جديدة () ؛
image.src = this.props.imgUrl ؛
image.onload = () => {
image.width = image.height = 35 ؛
this.props.connectDragPreview (صورة) ؛
}
} ؛

أي تعديل حدث في هذه القضية؟

يمكنك تحقيق ذلك على عنصر الشاشة.

في مواصفات DragSource في beginDrag والتي تُستخدم لتعريف عنصر المراقبة ، تحصل على مثيل مكون رد الفعل باعتباره الوسيطة الثالثة وإضافته إلى العنصر. لاحقًا ، باستخدام findDOMNode يمكنك الحصول على العقدة الفعلية.

لذلك ، قم أولاً بإضافة مثيل المكون إلى العنصر.

  beginDrag({ id }, monitor, component) {
    return {
      id,
      component
    };
  },

في وقت لاحق في DragLayer ، تحتاج إلى العنصر.

const CustomDragLayer = DragLayer(monitor => ({
  item: monitor.getItem(),
  isDragging: monitor.isDragging() // useful
}))(CustomDragLayer);

الآن في الدعائم CustomDragLayer ، ستتلقى عنصرًا يحتوي على مكون.

class CustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.width;
    this.height;

    // Now you can eacily get height or width from node 
    const node = findDOMNode(props.item.component);
    console.log(node.clientWidth);
  }
...

لاحظ كيف أن findDOMNode موجود في constructor ، وقد لا يتم استخدامه في render وفي معظم الحالات لا توجد حاجة فعلية ، من المحتمل أن يكون لـ Drag Source حجم ثابت.

MrBr ، شكرًا إنه يعمل.

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.