新组件类继承子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;
效果如图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。