如何将类组件转换为ReactJ中的功能组件

Question

我总是使用功能性组件，因为它们可以使我更加灵活性，并且可以与它们一起使用钩子。我有一个使用类组件编码的下拉菜单功能。现在，我需要将其转换为功能组件，因为我需要为某些菜单按钮（例如注销和名称等）进行一些后端工作。

我试图将其转换为自己，但结束时总是保持模态开放，并给我一个错误，读取“ this.props.toggle并不是下拉doggle.toggle”的函数，它使我的速度放慢了速度。网站令人难以置信。

如何使以下代码等同于功能组件？

类组件：

import React, { Component } from "react";
import PropTypes from 'prop-types';
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import { withRouter, Link } from "react-router-dom";

//i18n
import { withTranslation } from "react-i18next";
import { connect } from "react-redux";

class ProfileMenu extends Component {
  constructor(props) {
    super(props)
    this.state = {
      menu: false,
      name: "Admin",
    }
    this.toggle = this.toggle.bind(this)
  }

  toggle() {
    this.setState(prevState => ({
      menu: !prevState.menu,
    }))
  }

  render() {
    return (
      <React.Fragment>
        <Dropdown
          isOpen={this.state.menu}
          toggle={this.toggle}
          className="d-inline-block"
        >
          <DropdownToggle
            className="btn header-item"
            id="page-header-user-dropdown"
            tag="button"
          >
            <span className="d-none d-xl-inline-block ms-1">
              {this.state.name}
            </span>
            <i className="mdi mdi-chevron-down d-none d-xl-inline-block" />
          </DropdownToggle>
          <DropdownMenu className="dropdown-menu-end">
            <DropdownItem tag="a" href="/">
              Dashboard
            </DropdownItem>
            <div className="dropdown-divider" />
            <Link to="/logout" className="dropdown-item">
              <i className="bx bx-power-off font-size-16 align-middle me-1 text-danger" />
              <span>{this.props.t("Logout")}</span>
            </Link>
          </DropdownMenu>
        </Dropdown>
      </React.Fragment>
    )
  }
}

ProfileMenu.propTypes = {
  t: PropTypes.any,
  success: PropTypes.string
}

const mapStateToProps = state => {
  const { success } = state.Profile
  return { success }
}

export default withRouter(
  connect(mapStateToProps, {})(withTranslation()(ProfileMenu))
)

下面的代码是我尝试将其转换的方式

import React, { Component, useState, useEffect } from "react";
import PropTypes from 'prop-types';
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";
import { withRouter, Link, useHistory } from "react-router-dom";
import firebase from "../../../firebase"
function ProfileMenu(){
  const [isOpen, setIsOpen] = useState(false);

  const history = useHistory();
  const logout = () => {
    firebase.auth().signOut().then(function() {
      console.log("logged out")
      history.push("/login");
    }).catch(function(error) {
      // An error happened.
      console.log("didnt logout")
    });
  }
  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };


    return (
      <React.Fragment>
        <Dropdown
          isOpen={isOpen}
          onClick={openModal}
          toggle={""}
          className="d-inline-block"
        >
          <DropdownToggle
            // onClick={openModal}
            className="btn header-item"
            id="page-header-user-dropdown"
            tag="button"
          >
            <span className="d-none d-xl-inline-block ms-1">
              {/* {this.state.name} */}
            </span>
            <i className="mdi mdi-chevron-down d-none d-xl-inline-block" />
          </DropdownToggle>
          <DropdownMenu className="dropdown-menu-end">
         
            <DropdownItem tag="a" href="/">
              Dashboard
            </DropdownItem>
      
            <div className="dropdown-divider" />
            <button className="dropdown-item" onClick={logout}>
              <i className="bx bx-power-off font-size-16 align-middle me-1 text-danger" />
              <span>Logout</span>
            </button>
          </DropdownMenu>
        </Dropdown>
      </React.Fragment>
    )
  
}
export default ProfileMenu

Answer 1

const ProfileMenu = (props) => {

  const [name, setName] = useState('aaa'); // define and initialize name state
  
  ....

  let myName = name; // call name state

  ....

  let toggle = props.toggle; //call toggle props

}

我希望这对您有帮助。谢谢。

Answer 2

您需要将切换作为功能传递，而是传递字符串，也可以直接切换状态值，它将使组件重新渲染，尝试以下代码，让我知道这是否有帮助。

为了更好的可见性，我正在删除类名称，因此代码看起来很干净。

您还可以使用USECONTEXT而不是使用Redux。

import React, { useState } from "react";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap";
import { withRouter, useHistory } from "react-router-dom";
import firebase from "../../../firebase";

type Prop = {
  name: string;
};
const ProfileMenu: React.FC<Prop> = ({ name }) => {
  const [menu, setMenu] = useState(false);
  const history = useHistory();
  const logout = () => {
    firebase
      .auth()
      .signOut()
      .then(function () {
        history.push("/login");
      })
      .catch(function (error) {
        console.log("didnt logout");
      });
  };
  return (
    <Dropdown isOpen={menu} toggle={() => setMenu(!menu)} >
      <DropdownToggle >
        <span >{name}</span>
        <i className="mdi mdi-chevron-down d-none d-xl-inline-block" />
      </DropdownToggle>
      <DropdownMenu >
        <DropdownItem tag="a" href="/">
          Dashboard
        </DropdownItem>
        <div className="dropdown-divider" />
        <button onClick={logout}>
          <i className="bx bx-power-off font-size-16 align-middle me-1 text-danger" />
          <span>Logout</span>
        </button>
      </DropdownMenu>
    </Dropdown>
  );
};

export default withRouter(ProfileMenu);