高阶组件之属性代理

2019-02-20

新组件类继承子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;

效果如图: 图片描述

原文链接:segmentfault.com

上一篇:echarts实现词云自定义形状
下一篇:在react-router中进行代码拆分
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部