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