高阶组件之属性代理

新组件类继承子React.component类，对传入的组件进行一系列操作，从而产生一个新的组件，达到增强组件的作用操作props访问ref抽取state封装组件废话不多说，直接上代码：Tabbar.jsimport 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.jsimport React, { Component } from “react”;import Tabbar from “../components/Tabbar”;@Tabbarclass Home extends Component { render() { return ( <div> <img src={require(”../static/images/home.jpeg")} className=“bg” alt=“首页” /> </div> ); }}export default Home;效果如图：