[英]How to convert 'Functional Componenet' to 'Class Component' in React in Material-UI
Ie I want to use this Material-UI example as Class Component.即我想使用这个 Material-UI 示例作为 Class 组件。 How?如何?
import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
It raised many error, so I removed 'const', but still getting many issues.它引发了很多错误,所以我删除了“const”,但仍然遇到很多问题。
I don't know why would you want to convert a functional component into a class based one (usually goes the other way around).我不知道您为什么要将功能组件转换为基于 class 的组件(通常反过来)。 But it goes something like this但它是这样的
import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
export default class SimpleMenu extends React.Component {
state = {
anchorEl: null
}
handleClick = event => this.setState({ anchorEl: event.currentTarget })
handleClose = () => this.setState({ anchorEl: null })
render() {
const { anchorEl } = this.state
return (
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleClick}>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
}
Notice that useState
is a hook which isn't supported in class based components, you must use classic this.state
and this.setState
instead.请注意, useState
是一个钩子,在基于 class 的组件中不受支持,您必须使用经典this.state
和this.setState
代替。 Don't forget about this
before calling your handlers: this.handleClick
在调用处理程序之前不要忘记this
: this.handleClick
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.