React-dnd: Comment redimensionner un aperçu en fonction du véritable élément glissé ?

Consultez la documentation de DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Hé, j'ai un problème similaire - je veux donner une image pour l'aperçu du glissement et réagir, le dnd le rend trop gros - j'ai essayé de définir la taille de l'image avec largeur/hauteur et style.w/h avant de passer à connectDragPreview sans effet. J'ai passé au peigne fin la documentation et je n'ai trouvé aucune mention du redimensionnement de l'image d'aperçu. L'élément html réel qui affiche l'image dans ce cas est enfoui profondément dans un composant de bibliothèque de sorte qu'il n'est pas facilement accessible non plus, donc la solution la plus simple serait si connectDragPreview/dragPreview pouvait exposer une option de redimensionnement (ou encore mieux respecter le dimensionnement de l'image est passée).

voici du code qui ne fonctionne pas - la définition de la largeur et de la hauteur de l'image n'a aucun effet, que ce soit dans la fonction onload ou dans la fonction setDragImage :

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

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

setDragImage = () => {
image const = nouvelle Image();
image.src = this.props.imgUrl;
image.onload = () => {
image.largeur = image.hauteur = 35;
this.props.connectDragPreview(image);
}
} ;

Une mise à jour sur ce problème?

Vous pouvez y parvenir sur l'élément de moniteur.

Dans la spécification DragSource dans beginDrag qui est utilisé pour définir l'élément de moniteur, vous obtenez l'instance de composant de réaction en tant que troisième argument et l'ajoutez à l'élément. Plus tard, en utilisant findDOMNode vous pouvez obtenir un nœud réel.

Donc, ajoutez d'abord l'instance de composant à l'élément.

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

Plus tard dans le DragLayer, vous avez besoin de l'élément.

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

Maintenant, dans les accessoires CustomDragLayer, vous recevrez un élément qui aura un composant.

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

Remarquez comment findDOMNode est dans le constructor , il ne peut pas être utilisé dans le render et dans la plupart des cas, il n'y a pas de besoin réel, Drag Source a probablement une taille statique.

@MrBr , merci ça marche.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.