Question

当我想使用paint-ui@1.0.0-beta.10中的抽屉与打字稿时，我收到以下错误：

TS2322：输入'{children：Element; ''不能赋值给'IntrinsicAttributes＆amp; IntrinsicClassAttributes＆amp; Readonly＆lt; {children？：ReactNode; }＆GT; ＆安培;回覆...'。输入'{children：Element; }'不能分配给'Readonly＆gt;'类型。类型'{children：Element;}中缺少属性'type'; }”。

以下是我如何使用它：

<Drawer>
   <List>
      <ListItem>
         Item
      </ListItem>
   </List>
</Drawer>

使用的依赖项：

"@types/history": "4.6.0",
"@types/material-ui": "^0.18.0",
"@types/react": "^16.0.5",
"@types/react-dom": "15.5.1",
"@types/react-hot-loader": "3.0.3",
"@types/react-redux": "4.4.45",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/react-router-redux": "5.0.3",
"@types/webpack": "2.2.15",
"@types/webpack-env": "1.13.0",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"css-loader": "0.28.4",
"domain-task": "^3.0.3",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"history": "4.6.3",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"material-ui": "^1.0.0-beta.10",
"material-ui-icons": "^1.0.0-beta.10",
"node-noop": "1.0.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-thunk": "2.2.0",
"style-loader": "0.18.2",
"typeface-roboto": "0.0.35",
"typescript": "^2.5.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0"

我做错了吗？谢谢！

Answer 1

类型中缺少属性'type'

您需要指定type属性。如果你看DrawerProps，你有3个选择

export interface DrawerProps extends ModalProps {
  anchor?: 'left' | 'top' | 'right' | 'bottom';
  elevation?: number;
  enterTransitionDuration?: number;
  leaveTransitionDuration?: number;
  open?: boolean;
  SlideProps?: SlideProps & StyledComponentProps<any>;
  theme?: Theme;
  type: 'permanent' | 'persistent' | 'temporary';
}

我在V1.0.0中的打字稿代码：

        <Button onClick={() => this.IsPrinting = true}>Open Right</Button>
        <Drawer
        type="temporary"
  anchor="right"
  open={this.IsPrinting}
  onRequestClose={() => this.IsPrinting = false}>
  <div className="rightDrawer"></div>
</Drawer>

.rightDrawer {
  width: 400px;
  flex: 'initial';
}

使用的依赖项：

"material-ui": "^1.0.0-beta.12",
"material-ui-icons": "^1.0.0-beta.10",

material-ui v1.0中的抽屉不适用于打字稿

1 个答案: