React-dnd: ¿Cómo cambiar el tamaño de una vista previa en función del elemento arrastrado real?

Consulte la documentación de DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Oye, tengo un problema similar: quiero dar una imagen para la vista previa de arrastre y reaccionar y hacerlo demasiado grande. Intenté configurar el tamaño de la imagen con ancho / alto y estilo.w / h antes de pasar a connectDragPreview sin efecto. Revisé la documentación y no pude encontrar ninguna mención sobre el cambio de tamaño de la imagen de vista previa. El elemento html real que muestra la imagen en este caso está enterrado en el fondo de un componente de la biblioteca, por lo que tampoco es de fácil acceso, por lo que la solución más sencilla sería si connectDragPreview / dragPreview pudiera exponer una opción de cambio de tamaño (o incluso mejor respetar el tamaño de la imagen pasó).

Aquí hay un código que no funciona: configurar el ancho y la altura de la imagen no tiene ningún efecto, ya sea en la función de carga o en la función setDragImage:

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

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

setDragImage = () => {
imagen constante = nueva imagen ();
image.src = this.props.imgUrl;
image.onload = () => {
image.width = image.height = 35;
this.props.connectDragPreview (imagen);
}
};

¿Alguna actualización sobre este tema?

Puede lograr eso sobre el elemento del monitor.

En la especificación DragSource en beginDrag que se usa para definir el elemento del monitor, obtiene la instancia del componente de reacción como tercer argumento y lo agrega al elemento. Más adelante, al usar findDOMNode puede obtener el nodo real.

Entonces, primero agregue la instancia del componente al elemento.

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

Más adelante, en DragLayer, necesita el elemento.

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

Ahora, en los accesorios de CustomDragLayer, recibirá un elemento que tendrá un componente.

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

Observe cómo findDOMNode está en constructor , es posible que no se use en render y, en la mayoría de los casos, no existe una necesidad real, la fuente de arrastre probablemente tenga un tamaño estático.

@MrBr , gracias, está funcionando.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.