Question

我正在使用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;

Answer 1

我正在从旧版本的材料ui升级。事实证明我为旧版本安装了@types/material-ui。所以错误是因为typescript使用了错误的类型定义。一旦我删除了那些旧的类型定义，一切都开始正常工作。

抽屉不使用Typescript - material-ui v1

1 个答案: