reactjs - 打字稿编译错误尝试使用material-ui withStyles
问题描述
我在用着:
- "@material-ui/core": "3.5.1",
- “反应”:“16.4.0”,
- “打字稿”:“2.6.1”
我正在尝试复制SimpleListMenu的 material-ui 演示,但我遇到了最后一个编译错误,我不知道该怎么做。
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import {StyleRulesCallback, Theme, WithStyles} from "@material-ui/core";
import withStyles from "@material-ui/core/styles/withStyles";
const styles: StyleRulesCallback<"root"> = (theme: Theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
});
const options = [
'Show some love to Material-UI',
'Show all notification content',
'Hide sensitive notification content',
'Hide all notification content',
];
type Props = WithStyles<typeof styles> & {
classes: {
root: string
}
};
type State = {
anchorEl: EventTarget & HTMLElement | null
selectedIndex: number
};
class SimpleListMenu extends React.Component<Props, State> {
state = {
anchorEl: null,
selectedIndex: 1,
};
handleClickListItem = (event: React.MouseEvent<HTMLElement>) => {
this.setState({ anchorEl: event.currentTarget });
};
handleMenuItemClick = (event: React.MouseEvent<HTMLElement>, index: number) => {
this.setState({ selectedIndex: index, anchorEl: null });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { anchorEl } = this.state;
return (
<div className={this.props.classes.root}>
<List component="nav">
<ListItem
button
aria-haspopup="true"
aria-controls="lock-menu"
aria-label="When device is locked"
onClick={this.handleClickListItem}
>
<ListItemText
primary="When device is locked"
secondary={options[this.state.selectedIndex]}
/>
</ListItem>
</List>
<Menu
id="lock-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
{options.map((option, index) => (
<MenuItem
key={option}
disabled={index === 0}
selected={index === this.state.selectedIndex}
onClick={event => this.handleMenuItemClick(event, index)}
>
{option}
</MenuItem>
))}
</Menu>
</div>
);
}
}
export default withStyles(styles, {withTheme: true })<Props>(SimpleListMenu); // Compile error here
我收到此错误:
TS2344: Type 'Props' does not satisfy the constraint 'ComponentType<ConsistentWith<Props, boolean>>'.
Type 'Props' is not assignable to type 'StatelessComponent<ConsistentWith<Props, boolean>>'.
Type 'Props' provides no match for the signature '(props: ConsistentWith<Props, boolean> & {children? ReactNode;}, context?: any): ReactElement<any> | null'.
我已经尝试了很多方法来解决这个错误。我主要是按照这个人的例子。有人有一些见识吗?
ETA:我尝试编译 stackoverflow 问题中的代码,但得到的编译错误与我的编译错误相同。我还尝试了 withStyles() 返回的组件中 Typescript type error 中的几乎所有示例,并且我得到了相同的 typescript 错误。所以它一定与我的安装有关吗?
解决方案
尝试遵循https://material-ui.com/guides/typescript/中的打字模式
尤其
type Props = WithStyles<typeof styles> & {
classes: {
root: string
}
};
不遵循建议。
可以在https://next--material-ui.netlify.com/demos/menus/#selected-menus上找到菜单演示的工作示例(单击显示源,然后切换到 TS)
推荐阅读
- javascript - React Context API 不更新存储
- javascript - ReactJS:去抖一个以状态值作为参数的函数;最好的方法是什么?
- c# - C# 扩展方法类型
- opengl-es - GLSL - 片段着色器不同部分的不同精度
- javascript - 如何使用 Angular 6 中的库存工具创建 Highstock?
- algorithmic-trading - 如何添加预先确定的止损和获利?
- apache-kafka - 如何消费一个 kafka 主题中的所有有效数据
- maven - 通过打包程序构建运行 Maven 映像时出错
- airflow - Airflow -D 不工作,不在后台运行
- python - 从 python 调用 Fortran