0

在我semantic-ui-react用于 UI 的带有打字稿的反应应用程序中。这个snabdobx显示了Menu.Item在 javascript 中的用法，但我想在 typescript 中使用它并感到困惑。

<Menu.Item  name="home"  active={activeItem === 'home'}
      onClick={this.handleItemClick}>

public handleItemClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    {name} // Here I ahve problem with typings to destruct the name
  ) => {
    this.setState({ activeItem: name });
  };

中的类型MenuItem.d.ts是

export interface MenuItemProps extends StrictMenuItemProps {[key: string]: any}

export interface StrictMenuItemProps {
  /*many other values */
  /** Internal name of the MenuItem. */
  name?: string

  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: MenuItemProps) => void
}

这里{name}:{name:string}行不通。并获取我无法设置状态的全部数据data.name

4

2 回答 2

2

像这样输入意味着({ name })参数name是any类型，所以它不会抛出错误。

将字符串（例如“消息”）传递给handleItemClick您应该执行以下操作：

 handleItemClick = (name: string) => () => this.setState({ activeItem: name })
...
<Menu.Item
    name='messages'
    active={activeItem === 'messages'}
    onClick={this.handleItemClick('message')}
/>

正如您在 TS 错误消息中看到的，Menu.click 回调的第二个参数MouseEvent不是{name: string}

顺便说一句：为了更安全，您可以在文件中打开strictFunctionTypes标志compilerOptionstsconfig.json

---- 已编辑 -----

我想我明白你的意思了。请忘记前面的部分：

Menu.Item.onClick已由接口中的@types lib 键入StrictMenuItemProps。要获取类型，您可以使用等于等于的onClick语法，但您可以使用它而无需从 lib 复制代码。StrictMenuItemProps['onClick']onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: MenuItemProps) => void

因此，您可以通过public handleItemClick键入来代替键入。(arg1: Type1, arg2: Type2): Result { ...public handleItemClick: StrictMenuItemProps['onClick'] = (e, {name}) => setState

TS 会将函数的参数类型与参数匹配，因此e不会name是any类型

例子

于 2019-03-06T14:40:37.973 回答
0

所以似乎它自己的名称是类型并不重要，string整个对象是类型MenuItemProps

因此以下解决了这个问题

  public handleItemClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    { name }: MenuItemProps
  ) => {
    this.setState({ activeItem: name! });
  };
于 2019-03-06T15:31:22.123 回答