React DND typescript support

Question

Typescriptのサポートでこのライブラリを使用していると言われているユーザーをいくつか読んだが、私はドキュメントをどこにも見つけることができず、自分では動作させられないようだ。

私はtypescript 2を使用しています。既存のコンポーネントをドラッグするだけの簡単な実例を作成することはできません。私はいくつかの可能性を試しましたが、DragSourceを（デコレータや関数として）呼び出すときや、結果として得られるコンポーネントをレンダリングするときに、型付けに関する問題に悩まされています。

簡潔に言えば、既存のコンポーネントをドラッグ可能にする方法を可能にするtypescriptのreact-dndの使用例を示します。コンポーネント自体を変更せずに（おそらくドラッグ可能であることに気づくべきではありません）

ありがとうございました！

Answer 1

2.1のDTタイプパッケージで作業しています。それはstrictNullChecksでコンパイルされず、理由を追跡できませんでした。 （@DragSourceと@DropTargetでコンポーネントを飾ると、レンダリング関数の戻り値の型が何らかの形でElementからElementへ返されますが、私は方法はわかりません）

もう一つの問題は、レンダリングメソッドでコンポーネントを最初にインスタンス化するとき、収集関数によって挿入された小道具は定義されていないので、オプションは束の{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> {