React-dnd: Wie ändere ich die Größe einer Vorschau basierend auf dem echten gezogenen Element?

Schauen Sie in die Dokumentation für DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Hey, ich habe ein ähnliches Problem - möchte ein Bild für die Drag-Preview geben und reagieren dnd macht es zu groß - Ich habe versucht, die Bildgröße mit width/height und style.w/h einzustellen, bevor ich wirkungslos an connectDragPreview übergeben habe. Habe die Dokumentation durchgekämmt und konnte keinen Hinweis auf die Größenänderung des Vorschaubildes finden. Das eigentliche HTML-Element, das das Bild in diesem Fall anzeigt, ist tief in einer Bibliothekskomponente vergraben, so dass es auch nicht leicht zugänglich ist das Bild ist eingegangen).

Hier ist ein nicht funktionierender Code - das Einstellen der Bildbreite und -höhe hat keine Auswirkungen, weder in der onload-Funktion noch in der setDragImage-Funktion:

KomponenteDidMount = () => {
this.setDragImage();
};

KomponenteDidUpdate = () => {
this.setDragImage();
};

setDragImage = () => {
const image = new Image();
image.src = this.props.imgUrl;
image.onload = () => {
image.width = image.height = 35;
this.props.connectDragPreview(Bild);
}
};

Irgendein Update zu diesem Thema?

Das können Sie über den Monitor-Punkt erreichen.

In der DragSource-Spezifikation in beginDrag die verwendet wird, um das Monitorelement zu definieren, erhalten Sie die Instanz der Reaktionskomponente als drittes Argument und fügen es dem Element hinzu. Später können Sie mit findDOMNode den tatsächlichen Knoten erhalten.

Fügen Sie also zuerst die Komponenteninstanz zum Element hinzu.

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

Später im DragLayer benötigen Sie das Element.

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

Jetzt erhalten Sie in CustomDragLayer-Requisiten einen Gegenstand, der eine Komponente enthält.

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

Beachten Sie, dass findDOMNode in constructor , es möglicherweise nicht in render und in den meisten Fällen keine tatsächliche Notwendigkeit besteht, Drag Source hat wahrscheinlich eine statische Größe.

@MrBr , danke, es funktioniert.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.