抽屉不适用于 Typescript - material-ui v1答案

【问题标题】：Drawer not working with Typescript - material-ui v1抽屉不适用于 Typescript - material-ui v1
【发布时间】：2018-03-12 14:38:15
【问题描述】：

我正在使用 material-ui@1.0.0-beta.37 和 typescript@2.7.2。我正在尝试使用 Drawer 组件创建侧导航栏，但我从 Typescript 收到以下编译错误：

(21,9): Property 'onClose' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Drawer> & Readonly<{ children?: ReactNode; }> & Readonly<DrawerProps>'.

我检查了 material-ui 类型，并且 onClose 似乎来自 ModalProps，它是 DrawerProps 的一部分。我需要做些什么才能正确使用 material-ui 类型吗？

这是我的 SideNav 组件：

import * as React from 'react';
import Drawer from 'material-ui/Drawer';
import { MenuItem } from 'material-ui/Menu';

export interface SideNavStateProps {
  isOpen: boolean;
}

export interface SideNavDispatchProps {
  toggleDrawer: () => void;
}

export interface SideNavProps extends SideNavStateProps, SideNavDispatchProps {}

class SideNav extends React.Component<SideNavProps, any> {
  render() {
    return (
      <Drawer
        open={this.props.isOpen}
        docked={false}
        onClose={this.props.toggleDrawer}
      >
        <MenuItem>Profile</MenuItem>
        <MenuItem>Meal Plans</MenuItem>
        <MenuItem>Logout</MenuItem>
      </Drawer>
    );
  }
}

export default SideNav;

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

我正在从旧版本的 material-ui 升级。原来我为旧版本安装了@types/material-ui。所以错误是因为打字稿使用了错误的类型定义。一旦我删除了那些旧的类型定义，一切都开始正常工作了。

【讨论】：