Question

我想使用<DrawerLayout <CoordinatorLayout <ViewPager <MaterialToolBar来代替useEffect()，但是我发现该钩子不能在类组件中使用，因此我将代码更改为Function组件，但是这样做会导致更多错误整个组件，带有this.xxx的所有代码都出现错误，如何编辑以下代码以使其正常工作？对于初学者来说，这并不容易。请帮我。下面的代码可以与componentWillMount()正常工作。

componentWillMount()

Answer 1

componentDidMount（）是要使用的生命周期方法，可以与在功能组件中使用的useEffect进行比较。 componentWillMount（）已弃用，您不应使用它。

Answer 2

我试图用钩子将您的类组件重构为功能组件。最后，我发现最好使用useEffect钩子来代替useMemo钩子。 useMemo用于记住昂贵的计算，在这种情况下，是menuNodes和openKey的计算。 useMemo将在依赖项更改时运行，在这种情况下为[menuList, path]。

您还将注意到，我用with从'react-router-dom'中调用useLocation钩子代替了withRouter高阶组件。

让我知道这是否适合您，以及您是否有任何疑问。

import React, { useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import logo from '../../assets/images/logo.png';
import './index.less';
import { Menu } from 'antd';
import menuList from '../../config/menuConfig';

const LeftNav = (props) => {
  const location = useLocation();
  const path = location.pathname;

  const { MenuNodes, openKey } = useMemo(() => {
    let openKey;

    const getMenuNodes = (menuList) => {
      return menuList.reduce((pre, item) => {
        if (!item.children) {
          pre.push(
            <Menu.Item key={item.key} icon={item.icon}>
              <Link to={item.key}>{item.title}</Link>
            </Menu.Item>
          );
        } else {
          const cItem = item.children.find((cItem) => cItem.key === path);
          if (cItem) {
            openKey = item.key;
          }
          pre.push(
            <Menu.SubMenu key={item.key} icon={item.icon} title={item.title}>
              {getMenuNodes(item.children)}
            </Menu.SubMenu>
          );
        }
        return pre;
      }, []);
    };

    const nodes = getMenuNodes(menuList);

    return { MenuNodes: nodes, openKey: openKey };
  }, [path]);

  return (
    <div className="left-nav">
      <Link to="./" className="left-nav-header">
        <img src={logo} alt="" />
        <h1>Backend System</h1>
      </Link>
      <Menu selectedKeys={[path]} defaultOpenKeys={[openKey]} mode="inline" theme="dark">
        {MenuNodes}
      </Menu>
    </div>
  );
};

export default LeftNav;

编辑

修复了getMenuNodes中的递归调用

如何在Class组件中使用useEffect（）？

2 个答案:

编辑