高阶组件之属性代理

新组件类继承子React.component类，对传入的组件进行一系列操作，从而产生一个新的组件，达到增强组件的作用

• 操作props
• 访问ref
• 抽取state
• 封装组件

废话不多说，直接上代码：

Tabbar.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./index.less";
const tabbarArr = [
  {
    img: "icon-home",
    text: "首页",
    link: "/home"
  },
  {
    img: "icon-fenlei",
    text: "分类",
    link: "/category"
  },
  {
    img: "icon-shoutibao",
    text: "拼购",
    link: "/pingou"
  },
  {
    img: "icon-gouwuche",
    text: "购物车",
    link: "/car"
  },
  {
    img: "icon-yonghu",
    text: "我的",
    link: "/user"
  }
];
const Tabbar = WrappedComponent =>
  class Tabbar extends Component {
    constructor(props) {
      super(props);
      this.state = {
        activeIndex: 0
      };
    }
    componentDidMount() {
    }
    render() {
      const url = window.location.href;
      return (
        <div className="container">
          <div className="content">
            <WrappedComponent />
          </div>
          <div className="tabbar">
            <div className="tabbar-content">
              {tabbarArr.map((item, index) => {
                return (
                  <Link
                    to={item.link}
                    className={
                      "tabbar-item" +
                      (url.indexOf(item.link) > 0 ? " active" : "")
                    }
                    key={index}
                  >
                    <div className={"iconfont " + item.img} />
                    <div>{item.text}</div>
                  </Link>
                );
              })}
            </div>
          </div>
        </div>
      );
    }
  };

export default Tabbar;

Home.js

import React, { Component } from "react";
import Tabbar from "../components/Tabbar";
@Tabbar
class Home extends Component {
  render() {
    return (
      <div>
        <img
          src={require("../static/images/home.jpeg")}
          className="bg"
          alt="首页"
        />
      </div>
    );
  }
}
export default Home;

效果如图：