Question

我读到一些用户提到他们正在使用这个带有Typescript支持的库，但我无法在任何地方找到任何文档，也似乎无法让它自己运行。

我正在使用打字稿2，我无法创建一个非常简单的工作示例，只允许我拖动现有的组件。我尝试了几种可能性，但是在调用DragSource（作为装饰器或函数）或渲染结果组件时，我总是遇到一些打字问题。

简而言之，我想要一个示例，它显示了typescript中react-dnd的用法，它允许我如何使现有组件可拖动，可能无需修改组件本身（它不应该知道它是可拖动的）

感谢您的帮助！

Answer 1

我已经在2.1上使用了DT类型包。它没有使用strictNullChecks编译，我也无法找到原因。（当您使用@DragSource和@DropTarget装饰组件时，您以某种方式将渲染函数的返回类型从Element更改为Element | null，但我无法看到。）

另一个问题是当你第一次在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>  {

React DND打字稿支持

1 个答案: