如何将使用钩子的 React 功能组件转换为类?

Question

我在尝试将 React 功能组件转换为类时遇到了一些障碍。这是我的功能组件代码

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import DashboardIcon from '@material-ui/icons/Dashboard';
import BarChartIcon from '@material-ui/icons/BarChart';
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
import { Link } from 'react-router-dom';
import './drawer.scss';
import { useEffect } from 'react';
const drawerWidth = 87;
const styles = {
root: {
display: 'flex'
},
appBar: {
zIndex: 2000
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth
},
content: {
flexGrow: 1,
padding: 3
}
};
interface Props {
classes: any;
}
const ClippedDrawer = (props: Props) => {
const [selectedIndex, setSelectedIndex] = React.useState(-1);
useEffect(() => {
const path: string = window.location.pathname;
switch (path) {
case '/':
setSelectedIndex(1);
break;
default:
setSelectedIndex(1);
break;
}
}, []);
const { classes } = props;
const handleClickDashboard = (
event:
| React.MouseEvent<HTMLLIElement>
| React.MouseEvent<HTMLAnchorElement>
| React.MouseEvent<HTMLDivElement>,
index: number = 0
) => {
setSelectedIndex(index);
};
return (
<div className={classes.root}>
<Drawer
className={classes.drawer}
variant='permanent'
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
<List>
<Link to={'/'}>
<ListItem
button={true}
selected={selectedIndex === 0}
onClick={handleClickDashboard}
>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary='Dashboard' />
</ListItem>
</Link>
<Divider />
<Link to={'/'}>
<ListItem button={true} selected={selectedIndex === 2}>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
<ListItemText primary='Scenario Analysis' />
</ListItem>
</Link>
<Divider />
<Link to={'/'}>
<ListItem button={true} selected={selectedIndex === 3}>
<ListItemIcon>
<AssignmentIndIcon />
</ListItemIcon>
<ListItemText primary='Admin' />
</ListItem>
</Link>
</List>
<div className='branding'>
<p>Powered by</p>
<div className='logo' />
</div>
</Drawer>
</div>
);
};
export default withStyles(styles)(ClippedDrawer);

现在，这是我尝试将功能组件转换为类所做的工作：

interface Props {
classes: any;
selectedIndex: number;
}
class ClipperDrawer extends React.Component<any, Props> {
constructor(props: any) {
super(props);
this.state = {
classes: [],
selectedIndex: 0
};
}
public componentDidMount(): void {
const path: string = window.location.pathname;
switch (path) {
case '/':
this.setState({setSelectedIndex: 1})
break;
default:
this.setState({setSelectedIndex: 1})
break;
}
}
public render() {
const { classes, selectedIndex } = this.props;
return (
<div className={classes.root}>
<Drawer
className={classes.drawer}
variant='permanent'
classes={{
paper: classes.drawerPaper
}}
>
<div className={classes.toolbar} />
<List>
<Link to={'/'}>
<ListItem
button={true}
selected={selectedIndex === 0}
onClick={this.handleClickDashboard}
>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary='Dashboard' />
</ListItem>
</Link>
<Divider />
<Link to={'/'}>
<ListItem button={true} selected={selectedIndex === 2}>
<ListItemIcon>
<BarChartIcon />
</ListItemIcon>
<ListItemText primary='Scenario Analysis' />
</ListItem>
</Link>
<Divider />
<Link to={'/'}>
<ListItem button={true} selected={selectedIndex === 3}>
<ListItemIcon>
<AssignmentIndIcon />
</ListItemIcon>
<ListItemText primary='Admin' />
</ListItem>
</Link>
</List>
</Drawer>
</div>
);
}
private handleClickDashboard = (
event:
| React.MouseEvent<HTMLLIElement>
| React.MouseEvent<HTMLAnchorElement>
| React.MouseEvent<HTMLDivElement>,
index: number = 0
) => {
const { setSelectedIndex } = this.state;
this.setState({ setSelectedIndex: index });
};
}

现在我想删除useEffect钩并将逻辑放在componentDidMount和handleClickDashboard方法中。但是我收到一个错误说但我收到错误

Argument of type '{ setSelectedIndex: number; }' is not assignable to parameter of type 'Props | ((prevState: Readonly<Props>, props: Readonly<any>) => Props | Pick<Props, "classes" | "selectedIndex"> | null) | Pick<...> | null'. Object literal may only specify known properties, and 'setSelectedIndex' does not exist in type 

Answer 1

您定义了props的类型，state不正确，

interface Props {
classes: any;
selectedIndex: number;
}
class ClipperDrawer extends React.Component<any, Props> {
// ------------------------------------------^

它应该是：

interface Props {
classes: any;
selectedIndex: number;
}
interface State {
setSelectedIndex: number;
// ... rest of the state values
}
class ClipperDrawer extends React.Component<Props, State> {

Answer 2

>我有setSelectedIndex而不是selectedIndex