![](/img/trans.png)
[英]How to convert a React class-based component into a functional component?
[英]How to convert 'Functional Componenet' to 'Class Component' in React in Material-UI
即我想使用這個 Material-UI 示例作為 Class 組件。 如何?
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”,但仍然遇到很多問題。
我不知道您為什么要將功能組件轉換為基於 class 的組件(通常反過來)。 但它是這樣的
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
是一個鈎子,在基於 class 的組件中不受支持,您必須使用經典this.state
和this.setState
代替。 在調用處理程序之前不要忘記this
: this.handleClick
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.