Tab组件是网站场景的一种组件，负责在同一页面展示不同信息时的切换，在项目中应用页极为场景，包括首页，大促，收藏页，订单页，我的拼团，我的优惠券等很多页都使用了Tab组件，因此抽离一个通用的tab组件，同时为后面抽离组件，增强易用性，做一些实践总结。

效果如下

16567ffb-7369-4714-bcc1-ea5e59fb53e8.gif

组件分析

• 可以看到组件分为两部分，顶部绿色区域和底部红色区域，而顶部的点击事件会改变底部的显示，所以二者是相互关联的组件。因此有两种解决方案，也涉及到组件设计的两个概念。
  
  image.png
  1. 木偶组件，也叫傻瓜组件，顾名思义就是组件的一切功能都由父组件去执行，比如当前显示的是第几页，都储存在父组件，通过props传入，组件只负责根据传入的props进行展示就好了，Google的material design就是这样设计的，这样的组件比较直观，可以给使用者直观的结构，但是易用性不高，使用者需要手动去写父级组件的显示逻辑，调用的很笨重，伪代码如下。

<TabFather>
  <TabNav>
    <div>第一页</div>
    <div>第二页</div>
  <TabContent>
    <div>第一页的内容</div>
    <div>第二页的内容</div>
  </TabContent>
</TabFather>

2. 智能组件，顾名思义就是一切功能都是组件自己实现的，使用者只需要手动把自己的组件塞到Tab组件中去即可，比如ant design的Tab组件，这样的组件易用性很高，恶心了开发者方便了使用者，把所有逻辑都封锁在自身，只提供一些hook给外界。因此此次抽组件选择了智能组件的形式,伪代码如下。

<Tabs defaultActiveIndex={0} >
    <TabCard title='第一页' order={0}>
           {第一页的内容}
    </TabCard>
    <TabCard title='店铺1' order={1}>
          {第二页的你日工}
    </TabCard>
  </ Tabs>

代码关键点
使用智能组件时暴露给外界的组件格式就只有Tab和TabCard，具体的nav和content都是动态渲染出来的，在这个渲染过程中运用了一些奇淫巧技。

首先我们看Tabs根组件

//  渲染顶部按钮
 renderTabNav() {
        const { classPrefix, children } = this.props;
        return ( 
            <TabNav
                key="tabBar" 
                classPrefix={classPrefix} 
                onTabClick={this.handleTabClick} 
                panels={children} 
                activeIndex={this.state.activeIndex}
            />);
    }
  //  渲染内容
    renderTabContent() {
        const { classPrefix, children } = this.props;
        return ( 
            <TabContent
                key="tabcontent" 
                classPrefix={classPrefix} 
                panels={children} 
                activeIndex={this.state.activeIndex}
            /> );
    }

    render() {
        const { className } = this.props;
        const classes = classnames(className, 'ui-tabs');
        return (
            <div className={classes}>
                {this.renderTabNav()}
                {this.renderTabContent()} 
            </div>
        );
    }

可以看到我将this.props.children作为props传入了TabNav与TabContent两个组件，这样使用者在使用组建时就无需手动调用Nav和Content，它是由内部自动传入的。

其次我们看TabNav组件

//  动态渲染顶部按钮
getTabs() {
        const { panels, classPrefix, activeIndex } = this.props;
        return React.Children.map(panels, (child) => {
            if (!child) {
                return;
            }
            const order = child.props.order;
            let classes = classnames({
                [`${classPrefix}-tab`]: true,
                [`${classPrefix}-active`]: activeIndex === order
            });
            const tabConfig = {
                key: order,
                role: 'tab',
                className: classes,
                ref: activeIndex === order ? 'activeTab' : null,
            };
            return (
                <li {...tabConfig} onClick={this.calculNavPos.bind(this, event, order)}>
                    <span className={`${classPrefix}-tab-text`}>
                    {child.props.title}
                    </span>
                </li>
            );
        });
    }

render() {
        const { classPrefix } = this.props;
        const rootClasses = classnames({
            [`${classPrefix}-nav-wrapper`]: true          
        });
        return (
            <div className={rootClasses}>
                <ul>
                {this.getTabs()}
                </ul>
            </div>
        );
    }

可以看到，通过React.Children.map()（这里不要用this.props.children.map直接遍历，因为在子组件只有一个的情况有可能不是一个数组，而React的map方法已经考虑了这种情况），方法对之前从根组件传入的children进行遍历，将他们封装成<li>返回，还在li中添加了index，key等熟悉，解决了手动写这些的烦恼。li的值child.props.title，

最后看看TabContent组件

getTabContents() {
        const { classPrefix, activeIndex, panels } = this.props;
        return React.Children.map(panels, (child) => {
            if (!child) {
                return;
            }
            const order = parseInt(child.props.order, 10);
            const isActive = activeIndex === order;
            return React.cloneElement(child, {
                classPrefix,
                isActive,
                Children: child.props.children,
                key: `tabpan-${order}`
            });
        });
    }
    render() {
        const { classPrefix, children} = this.props;
        const classes = classnames({
            [`${classPrefix}-content`]: true
        });
        return (
            <div className={classes}>
                {this.getAnimateContainer()}
            </div>
        );
    }

content组件和Nav组件类似，都是遍历this.props.children，得到需要的组件，将他渲染出来，这里用了cloneElement方法，使得之前传入的组件是什么类型，这里还可以保持什么类型，cloneElement方法动态给组件添加属性是在ant design中很常见的一种手段。