React-dnd: Как изменить размер превью на основе реального перетаскиваемого элемента?

Посмотрите документацию по DragLayer (http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html)

Привет, у меня похожая проблема - хочу дать изображение для предварительного просмотра перетаскивания и реагировать, dnd делает его слишком большим - я попытался установить размер изображения с шириной / высотой и стилем. W / h, прежде чем переходить к connectDragPreview без эффекта. Прочесали документацию и не нашли упоминания об изменении размера изображения предварительного просмотра. Фактический элемент html, который отображает изображение в этом случае, похоронен глубоко в библиотечном компоненте, поэтому он также труднодоступен, поэтому наиболее простым решением было бы, если бы connectDragPreview / dragPreview мог бы предоставлять параметр изменения размера (или даже лучше учитывать размер изображение прошло).

вот какой-то нерабочий код - установка ширины и высоты изображения не имеет никакого эффекта ни в функции onload, ни в функции setDragImage:

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

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

setDragImage = () => {
const image = новое изображение ();
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);

Теперь в props 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 и в большинстве случаев в этом нет реальной необходимости, источник перетаскивания, вероятно, имеет статический размер.

@MrBr , спасибо, что работает.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.