The class component of react is rewritten into a functional component with hooks. How should `this.props` be rewritten?

try the hooks, in react 16.7alpha. There is a class component under it. Try to change it to a function component with hooks.

BasicLayout.js original


import React, { PureComponent } from "react";
import MenuBar from "@/components/MenuBar";
import NProgress from "nprogress";
import withRouter from "umi/withRouter";
import { connect } from "dva";
import "@/layouts/nprogress.less";

NProgress.configure({ showSpinner: false });

// bar
const BarRoutes = ["/shop", "/", "/me", "/category"];

class BasicLayout extends PureComponent {
  render() {
    const { children, location, loading } = this.props;

    let currHref = "";
    const { href } = window.location; // 
    if (currHref !== href) {
      // currHref  href 
      NProgress.start(); //  start 
      if (!loading.global) {
        // loading.global  false 
        NProgress.done(); //  done 
        currHref = href; //  href  currHref
      }
    }

    if (BarRoutes.indexOf(location.pathname) < 0) {
      return <div>{children}</div>;
    }

    return (
      <div style={{ overflowX: "hidden" }}>
        <MenuBar pathname={location.pathname}>{children}</MenuBar>
      </div>
    );
  }
}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(BasicLayout));

I changed it like this:


import React, { PureComponent } from "react";
import MenuBar from "@/components/MenuBar";
import NProgress from "nprogress";
import withRouter from "umi/withRouter";
import { connect } from "dva";
import "@/layouts/nprogress.less";

NProgress.configure({ showSpinner: false });


// bar
const BarRoutes = ["/shop", "/", "/me", "/category"];


function BasicLayout() {
  const { children, location, loading } = this.props;

  let currHref = "";
  const { href } = window.location; // 
  if (currHref !== href) {
    // currHref  href 
    NProgress.start(); //  start 
    if (!loading.global) {
      // loading.global  false 
      NProgress.done(); //  done 
      currHref = href; //  href  currHref
    }
  }

  if (BarRoutes.indexOf(location.pathname) < 0) {
    return <div>{children}</div>;
  }

  return (
    <div style={{ overflowX: "hidden" }}>
      <MenuBar pathname={location.pathname}>{children}</MenuBar>
    </div>
  );

}

export default withRouter(connect(({ app, loading }) => ({ app, loading }))(BasicLayout));

question: what should the first line in the
render () function change to this.props in const {children, location, loading} = this.props; ?

React.js

Nov.11,2021