React DND typescript support

Question

일부 사용자는 Typescript 지원으로이 라이브러리를 사용하고 있음을 언급했지만 어떤 문서도 찾을 수 없으며 독자적으로 작동하지 않을 수도 있습니다.

typescript 2를 사용하고 있으며 기존 구성 요소를 끌 수있는 간단한 작업 예제를 만들 수 없습니다. 몇 가지 가능성을 시도했지만 DragSource (장식 자 또는 함수로)를 호출하거나 결과 구성 요소를 렌더링 할 때 입력에 대한 문제가 생길 수 있습니다.

간단히 말해, typescript에서 react-dnd의 사용법을 보여주는 예제를 사용하면 기존 구성 요소를 드래그 가능하게 만드는 방법을 허용합니다. 구성 요소 자체를 수정하지 않고도 가능합니다 (드래그 가능하다는 것을 인식해서는 안됩니다)

도움 주셔서 감사합니다.

Answer 1

2.1에서 DT 유형 패키지로 작업하고 있습니다. strictNullChecks로 컴파일되지 않아 그 이유를 추적 할 수 없었습니다. (@DragSource 및 @DropTarget을 사용하여 구성 요소를 꾸밀 때 렌더링 함수의 반환 유형을 Element에서 Element로 변경하지만 어떻게 볼 수 없습니까?)

다른 중대한 문제는 render 메소드에서 컴포넌트를 처음으로 인스턴스화 할 때 콜렉션 함수에 의해 삽입되는 소품은 정의되지 않으므로, {undefined as any} 무리를 전달하거나 콜렉터 주입 소품을 옵션으로 선언하고 사용자가 보는 곳마다 유형을 지정하십시오 그들에게. 전반적으로 유형 선언 파일은 나쁘지 않으며 라이브러리를 알게 될 때 유해한 것보다 도움이 될 것입니다.

import { 
    ConnectDragSource, 
    DragDropContext, 
    DragSource, 
    DragSourceSpec, 
    DragSourceCollector, 
    DragSourceConnector, 
    DragSourceMonitor, 
    DragElementWrapper, 
    ConnectDropTarget, 
    DropTarget, 
    DropTargetConnector, 
    DropTargetMonitor, 
    ClientOffset, 
    DropTargetSpec } from 'react-dnd'; 
let HTML5Backend = require('react-dnd-html5-backend'); 
import { AdjacencyMatrixGraph } from "Geometry/Graph"; 

import * as React from "react"; 
import * as Sauce from "Sauce"; 
import * as ReactDOM from "react-dom"; 
import * as $ from "jquery"; 
import { Position2 } from "Geometry"; 
import * as Rx from "rxjs"; 
import * as Util from "Util"; 
require("./GraphBuilder.scss"); 

interface NodeProps { 
    label?: string; 
    position: ClientOffset; 
} 

/* New node from the node well */ 
export interface NodeSourceProps { 
    isDragging : boolean; 
    connectDragSource: ConnectDragSource; 
} 
export interface NodeSourceState { 
} 

// Spec: drag events to handle. 
let nodeSourceSpec: DragSourceSpec<NodeSourceProps> = { 
    beginDrag: (props: NodeSourceProps) => ({}), 
}; 

// Collect: Put drag state into props 
let nodeSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => { 
    return { 
     connectDragSource: connect.dragSource(), 
     isDragging: monitor.isDragging() 
    } 
}; 

@DragSource("new-node", nodeSourceSpec, nodeSourceCollector) 
export class NodeSource extends React.Component<NodeSourceProps, NodeSourceState> { 
    constructor(props: NodeSourceProps) { 
    super(props); 
    } 
    render() { 
    const { connectDragSource, isDragging } = this.props; 
    return connectDragSource(<span className="node-source">{'\u2683'}</span>); 
    } 
} 

/* main graph area */ 
interface GraphCanvasProps { 
    connectDropTarget: ConnectDropTarget, 
    isOver: boolean, 
    graph: AdjacencyMatrixGraph<NodeProps>; 
} 

interface GraphCanvasState {} 
const canvasDropTargetSpecification: DropTargetSpec<GraphCanvasProps> = { 
    drop(props: GraphCanvasProps, monitor: DropTargetMonitor, component: React.Component<GraphCanvasProps, any>) { 
    // console.log("Handling drop", print_monitor(monitor)); 
    let pos = monitor.getSourceClientOffset(); 
    if (monitor.getItemType() === "main-node-move") { 
     let node = (monitor.getItem() as any); 
     graph.setData(node.id, { position: pos }); 
    } 
    else if (monitor.getItemType() === "new-node") { 
     graph.addNode("node-" + graph.order(), { position: pos }); 
    } 
    }, 
}; 

function canvasDropTargetCollectingFunction(connect: DropTargetConnector, monitor: DropTargetMonitor) { 
    let rv = { 
    connectDropTarget: connect.dropTarget(), 
    isOver: monitor.isOver(), 
    }; 

    return rv; 
} 
/* ... here's a DropTarget ... */ 

@DropTarget(["main-node-move", "new-node"], canvasDropTargetSpecification, canvasDropTargetCollectingFunction) 
export class GraphCanvas extends React.Component<GraphCanvasProps, GraphCanvasState> { 
    constructor(props: GraphCanvasProps) { 
    super(props); 
    } 

    render(): JSX.Element | null { 
    const { connectDropTarget, graph } = this.props; 
    let nodes = graph.nodes(); 
    let nodeEls = Object.keys(nodes).map(k => { 
     let node = nodes[k]; 
     return <CanvasNode 
     key={k} 
     id={k} 
     node={node} 
     graph={graph} 
     connectNodeDrop={null as any} 
     connectMoveNodeDragger={(null)}/> 
    }); 
    return connectDropTarget(<div className="graph-canvas"> 
     {nodeEls} 
    </div>); 
    } 
} 

/* ... Here's a the DragContext decorator ... */ 

@DragDropContext(HTML5Backend) 
class Markov extends React.Component<MarkovProps, MarkovState> {