新组件类继承子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 (); } };export default Tabbar; {tabbarArr.map((item, index) => { return ( 0 ? " active" : "") } key={index} >{item.text}); })}
Home.js
import React, { Component } from "react";import Tabbar from "../components/Tabbar";@Tabbarclass Home extends Component { render() { return (); }}export default Home;
效果如图: