5 回答

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
狀態(tài)鉤子 (useState) 可用于功能性 React 組件,但在您的情況下,您使用的是類組件。函數(shù)式 React 組件通常沒(méi)有開(kāi)箱即用的狀態(tài),但這useState
是一個(gè)新功能,可以讓您解決這個(gè)問(wèn)題
您可以將其更改為功能組件,也可以將其保留為類組件并以不同的方式使用狀態(tài),例如:
!this.state.open
而不是!open
和this.setState({open: false})
代替setOpen(false)
https://reactjs.org/docs/hooks-state.html

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
將此行更改const [open, setOpen] = useState(false);
為this.state = { open: false };
當(dāng)設(shè)置為 true 時(shí),只需調(diào)用 this.setState({ open: this.state.open: true })

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
您必須使用功能組件。目前你的組件是一個(gè)類組件,所以你應(yīng)該有類似的東西:
const Navbar = (props) => {
const { authenticated } = props;
const [open, setOpen] = useState(false);
const handleDrawer = () =>{
setOpen(true)
}
return (
<AppBar position="fixed">...</AppBar>
);
};
我還注意到您的類組件具有在渲染方法中定義的狀態(tài)部分。使用類組件時(shí),應(yīng)該在constructor中定義狀態(tài),否則每次渲染時(shí)您的狀態(tài)都會(huì)被覆蓋。

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
使用function Navbar(props)
代替class Navbar extends Component
這是因?yàn)?,有一個(gè)規(guī)則:React Hook“useState”不能在class component
eg中調(diào)用class Navbar extends Component
。React function component
React Hooks 必須在例如function Navbar(props)
或自定義 React Hook 函數(shù)中調(diào)用

TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
函數(shù)組件而不是類組件怎么樣?如您所知,推薦使用功能組件。我認(rèn)為它很容易編碼并且可以提高性能。
const Navbar = () => {
//useState, define functions here
return (//the same as render method of your class component)
}
添加回答
舉報(bào)