共计 1233 个字符，预计需要花费 4 分钟才能阅读完成。
新组件类继承子 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;
效果如图：
