React.js：如何將基於類的組件轉換為函數式？

Question

我正在使用基於函數的組件構建應用程序。 我在類中找到了Material Ui的側邊欄菜單模板，並希望將其轉換為功能組件。 但轉換點擊按鈕后不起作用。 我只是將菜單圖標更改為另一個。 任何幫助將不勝感激。
這是類中的默認組件

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { NavDrawer } from "./NavDrawer";

class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerOpened: false
    };
  }
  toggleDrawer = booleanValue => () => {
    this.setState({
      drawerOpened: booleanValue
    });
  };

  render() {
    return (
      <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton
              color="secondary"
              aria-label="Menu"
              onClick={this.toggleDrawer(true)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit">
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>

        <NavDrawer
          drawerOpened={this.state.drawerOpened}
          toggleDrawer={this.toggleDrawer}
        />
      </div>
    );
  }
}

export default NavBar

在這里，我正在嘗試轉換

import React, { useState } from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton'
import NavDrawer from './NavDrawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'

function NavBar(props) {
  const [drawerOpened, setDrawerOpened] = useState(false)

  const toggleDrawer = booleanValue => () => {
    setDrawerOpened(booleanValue)
  }

  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton
            aria-label="AddShoppingCartIcon"
            onClick={() => toggleDrawer(true)}
          >
            <AddShoppingCartIcon style={{ fontSize: 30 }} color="secondary" />
          </IconButton>
          <Typography variant="h6" color="inherit"></Typography>
        </Toolbar>
      </AppBar>

      <NavDrawer drawerOpened={drawerOpened} toggleDrawer={toggleDrawer} />
    </div>
  )
}

export default NavBar

Answer 1

您可以這樣做來代替切換操作。

const toggleDrawer = () => {
    setDrawerOpened(!drawerOpened)
}

而在回報

onClick={toggleDrawer}

您的功能正在堆疊。 在 onclick 上，您嘗試調用函數來調用函數。 只需使用 const 代替。

在toggleDrawer const 上，您應該將setDrawerOpened 設置為與獲得切換效果相反的值。

Answer 2

看看 React hooks，有兩種方法：

const [toggleDrawer, setToggleDrawer] = useState(false);   // set variable
  <button onClick={() => setToggleDrawer(!toggleDrawer}>

您可以在組件初始渲染后使用 useEffect 執行一些邏輯，以防止出現最大錯誤：

const toggleDrawer = false;

          useEffect(() => {   // update variable
            checkDrawOpened(toggleDrawer)
          }, toggleDrawer);]

With the one click

onClick={toggleDrawer}  // use variable