node.js - 如何在 Material-UI 中的 React 中将“功能组件”转换为“类组件”
问题描述
即,我想将此 Material-UI 示例用作类组件。如何?
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>
);
}
它引发了很多错误,所以我删除了“const”,但仍然遇到很多问题。
解决方案
我不知道您为什么要将功能组件转换为基于类的组件(通常反过来)。但它是这样的
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>
);
}
}
请注意,这useState
是一个在基于类的组件中不支持的钩子,您必须使用 classicthis.state
和this.setState
代替。this
在调用你的处理程序之前不要忘记:this.handleClick
推荐阅读
- java - 如何使用 mockito 模拟注入对象的属性
- javascript - Angular 7:NullInjectorError:PagerService 没有提供者
- html - 没有表格单元格和行高的垂直居中文本?
- microsoft-graph-api - Microsoft Graph API:通过多个字段使用 $search 进行查询
- mysql - Liquibase 将列默认值设置为 null
- javascript - Javascript 从 AD 容器更改名称格式
- json - 获取嵌套对象http地址
- c# - 平滑一系列服务器端的结果以返回更少的数据点 (.NET)
- regex - 如何在量词中使用负后瞻?
- python - 在python中找不到鼠标悬停move_to_element