• 对于自定义灵活的可扩展React组件形式，如一个Tab组件：

<Tabs defaultActiveIndex="1" className="tabs-bar">
    <TabNav>
       <TabHead order='1'><div className='Tabs-1'>Tabs-1</div></TabHead>
       <TabHead order='2'>Tabs-2</TabHead>
       <TabHead order='3'>Tabs-3</TabHead>
    </TabNav>
    <TabContent>
       <TabPane order='1'>1</TabPane>
       <TabPane order='2'><div>tab-2</div></TabPane>
       <TabPane order='3'>3</TabPane>
     </TabContent>
</Tabs>

• 对于这种形式的组件，应该如何方便的实现？
• 如果直接在父组件的render返回内容中使用this.props.children，便会出现如何传递数据的问题；
• 尝试过使用React.Children和React.cloneElement配合对子组件进行克隆传递数据，如在TabContent组件中通过定于一个getTabPanes()对子组件进行克隆传递数据并返回：

import React, { Component } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';

class TabContent extends Component {
    static propTypes = {
        classPrefix: PropTypes.string,
        activeIndex: PropTypes.string,
    }

    getTabPanes() {
        const { activeIndex, children } = this.props;

        return React.Children.map(children, (child) => {
            if (!child) { return; }

            const order = child.props.order;
            const isActive = activeIndex === order;

            return React.cloneElement(child, {
                isActive,
                ...this.props,
                children: child.props.children,
                key: `tabpane-${order}`,
            })
        })
    }


    render() {
        const { classPrefix } = this.props;

        const classes = classnames({
            [`${classPrefix}-content`]: true,
        })

        return (
            <div className = {classes}>
                { this.getTabPanes() }
            </div>
        )
    }
}
export default TabContent;

• 对于这种形式，感觉逻辑有点复杂，不怎么清晰，很容易出现问题，而且得平白无故的多克隆出一个组件（这样每次更新都会从新克隆出一个组件导致从新渲染）会不会对性能有比较大的影响？
• 大家一般是如何实现这种形式的组件？使用context传数据吗？还是其他方法？

求指点、求指点。