博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高阶组件之属性代理
阅读量:6291 次
发布时间:2019-06-22

本文共 1541 字,大约阅读时间需要 5 分钟。

新组件类继承子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 (        
{tabbarArr.map((item, index) => { return (
0 ? " active" : "") } key={index} >
{item.text}
); })}
); } };export default Tabbar;

Home.js

import React, { Component } from "react";import Tabbar from "../components/Tabbar";@Tabbarclass Home extends Component {  render() {    return (      
首页
); }}export default Home;

效果如图:

图片描述

转载地址:http://xhkta.baihongyu.com/

你可能感兴趣的文章