React Tabs 标签 组件，附源码

Tabs页面：

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import bindAll from 'lodash.bindall';

import styles from './Tabs.css';

class TabsComonents extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            visible: false,
            activeKey: this.props.activeKey
        };
        bindAll(this,
            'renderHeader',
            'renderContent'
        );
    }

    renderHeader () {
        return React.Children.map(this.props.children, (element, index) => {
            const activeStyle = element.key === this.state.activeKey ? "activeTitle" : null;
            return (
                <span
                    onClick={() => {this.setState({activeKey: element.key})}}
                    className={classNames(styles.TableTitle, activeStyle)}
                >
                    {element.props.title}
                </span>
            );
        });
    }
    
    renderContent () {
        return React.Children.map( this.props.children, (element, index) => {
            if (element.key === this.state.activeKey) {
                return (<div>{element.props.children}</div>);
            }
        });
    }

    render () {
        return (
            <div className={styles.TableContainer}>
                <div className={styles.TableTitleContainer}>{this.renderHeader()}</div>
                <div className="contentContainer">{this.renderContent()}</div>
            </div>
        );
    }
}

TabsComonents.propTypes = {
    activeKey: PropTypes.string,
    children: PropTypes.children,
    title: PropTypes.string,
    
};

export default TabsComonents;

TabPane：

import React from 'react';
import PropTypes from 'prop-types';

const TabPaneComonents = props => {
    return (
        <div>
            <div>{props.title}</div>
            <div>{props.children}</div>
        </div>
    );
};

TabPaneComonents.propTypes = {
    children: PropTypes.children,
    title: PropTypes.string
};

export default TabPaneComonents;

调用：

 <Tabs activeKey="1">
      <TabPane title="title1" key="1">content1</TabPane>
      <TabPane title="title2" key="2">content2</TabPane>
 </Tabs>

https://download.youkuaiyun.com/download/u013040887/11891934