React-dnd: 실제 드래그 요소를 기반으로 미리보기의 크기를 조정하는 방법은 무엇입니까?

DragLayer에 대한 문서를 살펴보십시오(http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html).

안녕하세요. 비슷한 문제가 있습니다. 드래그 미리보기에 이미지를 제공하고 dnd가 너무 크게 만들고 있습니다. connectDragPreview에 아무 효과도 없이 전달하기 전에 너비/높이 및 style.w/h로 이미지 크기를 설정하려고 했습니다. 문서를 샅샅이 뒤져 미리보기 이미지 크기 조정에 대한 언급을 찾을 수 없습니다. 이 경우 이미지를 표시하는 실제 html 요소는 라이브러리 구성 요소에 깊숙이 묻혀 있어 쉽게 액세스할 수 없습니다. 따라서 가장 간단한 솔루션은 connectDragPreview/dragPreview가 크기 조정 옵션을 노출할 수 있는 경우입니다(또는 전달된 이미지).

다음은 작동하지 않는 코드입니다. 이미지 너비와 높이를 설정해도 onload 함수나 setDragImage 함수에서 아무 효과가 없습니다.

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

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

setDragImage = () => {
const 이미지 = 새로운 이미지();
image.src = this.props.imgUrl;
image.onload = () => {
이미지 너비 = 이미지 높이 = 35;
this.props.connectDragPreview(이미지);
}
};

이 문제에 대한 업데이트가 있습니까?

모니터 항목을 통해 달성할 수 있습니다.

모니터 항목을 정의하는 데 사용되는 beginDrag 의 DragSource 사양에서 반응 구성 요소 인스턴스를 세 번째 인수로 가져와 항목에 추가합니다. 나중에 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 대부분의 경우, 드래그 소스는 아마 정적 크기가 실제 필요가 없습니다.

@MrBr , 감사합니다. 작동합니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.