将无状态功能组件响应到类组件

Question

你能帮我把这个 React 无状态功能组件更改为基于 React 类的组件吗，包括给定的 withRouter 和历史对象？

const Menu = withRouter(({history}) => (
<AppBar>
</AppBar>
))
export default Menu

Answer 1

class Menu extends React.Component {
render() {
// you can use this.props.history anywhere in the class
const { history } = this.props;
return <AppBar>...</AppBar>
}
}
export default withRouter(Menu);

Answer 2

首先，创建类组件，然后为该类创建构造函数。然后，您可以在构造函数中定义所需的状态，如下所示-

export default class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
SomeVar: xyz,
AnotherVar: undefined
}
}
render() {
return withRouter(({history}) => (
<AppBar> </AppBar>
));
}
}