Question

我的一个功能组件中有一个onClick事件：

import * as React from 'react';

const BreadCrumbs: React.SFC<{level: Array<string>, changeLevel: Function}> = ({level, changeLevel}) => {
    return (
      <div>
        {
          level.map(function(elem, i) { 
            return <span key={i} onClick={changeLevel}>{elem}</span> 
          })
        }
      </div>
    )
}

export default BreadCrumbs;

在父组件中，我为<BreadCrumbs>组件提供了数组的道具和函数引用：

<BreadCrumbs level={this.state.levels} changeLevel={this.changeLevel}/>

这不起作用，因为在<BreadCrumbs>组件中，Typescript编译器失败并显示错误（在return <span>行上）：

[ts]
Type '{ key: number; onClick: Function; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.
  Type '{ key: number; onClick: Function; children: string; }' is not assignable to type 'HTMLAttributes<HTMLSpanElement>'.
    Types of property 'onClick' are incompatible.
      Type 'Function' is not assignable to type '((event: MouseEvent<HTMLSpanElement>) => void) | undefined'.
        Type 'Function' is not assignable to type '(event: MouseEvent<HTMLSpanElement>) => void'.
          Type 'Function' provides no match for the signature '(event: MouseEvent<HTMLSpanElement>): void'.
(JSX attribute) onClick: Function

但是，如果我将代码修改为：

const BreadCrumbs: React.SFC<{level: Array<string>, changeLevel: Function}> = ({level, changeLevel}) => {
    function something(i: number) {
      changeLevel(i);
    }
    return (
      <div>
        {
          level.map(function(elem, i) { 
            return <span key={i} onClick={something.bind(this, i)}>{elem}</span> 
          })
        }
      </div>
    )
}

export default BreadCrumbs;

一切正常。为什么第一个版本不起作用？

Answer 1

在TypeScript中，它使用强类型方式对函数执行类型检查，这会考虑函数的参数和返回值。因此，对于参数（React component prop）(event: React.MouseEvent<HTMLSpanElement>) => void，其类型应声明为(e: React.MouseEvent<Element>) => void或兼容类型（如() => void，() => any或Function ）。 const BreadCrumbs: React.SFC<{level: Array<string>, changeLevel: () => void}> = ({level, changeLevel}) => { return ( <div> { level.map(function(elem, i) { return <span key={i} onClick={changeLevel}>{elem}</span> }) } </div> ) }类型不用于函数类型声明，而是用于键入任何函数对象的全局构造函数，它缺少有关函数对象的信息，在键入函数时应该避免使用。

您可以将代码更改为以下版本，以传递TypeScript的检查。

bind

实际上，在第二个版本中，any函数的返回类型是Checkout，可以将其分配给TypeScript中任何类型的变量。 TypeScript在该版本中不执行任何类型检查。

React，Typescript中无状态功能组件内的事件处理

1 个答案: