Question

我第一次尝试使用TypeScript（2.4.2）进入React（15.6.1），我试图创建一个代表可拖动的JSON字段的组件。这是我的组件代码：

import * as React from "react";

interface JsonFieldProps {
    name: string;
    type: string;
    indent: number;
}

export class JsonField extends React.Component<JsonFieldProps, undefined> {
    marginStyle = {
        'text-indent': `${this.props.indent * 15}px`
    };

    render() {
        return <div draggable={true} onDragStart={handleDrag} style={this.marginStyle}>{this.props.name}: {this.props.type},</div>;
    }
}

function handleDrag(ev: DragEvent): void {
    let id = (ev.target as HTMLDivElement).id;
    ev.dataTransfer.setData("text/plain", id);
}

当我尝试编译它时（使用webpack），我收到以下错误：

ERROR in [at-loader] ./src/components/JsonField.tsx:15:21 
  TS2322: Type '{ draggable: true; onDragStart: (ev: DragEvent) => void;
    style: { 'text-indent': string; }; child...' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ draggable: true; onDragStart: (ev: DragEvent) => void; style: { 'text-indent': string; }; child...' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'onDragStart' are incompatible.
      Type '(ev: DragEvent) => void' is not assignable to type 'EventHandler<DragEvent<HTMLDivElement>>'.
        Types of parameters 'ev' and 'event' are incompatible.
          Type 'DragEvent<HTMLDivElement>' is not assignable to type 'DragEvent'.
            Property 'initDragEvent' is missing in type 'DragEvent<HTMLDivElement>'.

我不确定我是否使用了错误的事件类型，但如果错误的话，我似乎无法找到关于哪一个是正确的任何信息。

Answer 1

您必须使用React.DragEvent界面而不是通用DOM DragEvent：

export class JsonField extends React.Component<JsonFieldProps, undefined>
{
    private marginStyle = {
        textIndent: `${this.props.indent * 15}px`
    };

    public render()
    {
        return (
            <div
                draggable={true}
                onDragStart={handleDrag}
                style={this.marginStyle}>
                {this.props.name}: {this.props.type}
            </div>);
    }
}

function handleDrag(ev: React.DragEvent<HTMLDivElement>): void
{
    const id = (ev.target as HTMLDivElement).id;
    ev.dataTransfer.setData("text/plain", id);
}

请注意，当您使用react而不是纯HTML时，text-indent更改为textIndent。请记住，在做出反应时，您主要使用的是虚拟DOM，而不是真正的DOM - 因此所有这些变化。

作为旁注，我建议你将事件处理程序保留在类中而不是在它之外。这样您就可以访问类实例属性和方法。

如何使用TypeScript

1 个答案: