Как работает компонент?

Question

[lookingfor2]

Родительский компонент, который реализует табуляцию

return (
        <>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции по займам">
                    <div className="loans-history">
                        {
                            OperationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })
                        }
                    </div>
                     </TabBarItem>
            </TabBar>

        </>
    );

Дочерний компонент, который вызывается

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

import TabBarNav from './TabBarNav.jsx';

class TabBar extends Component {
    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string,
        vertical: PropTypes.bool,
    };

    static defaultProps = {
        children: null,
        className: '',
        vertical: false,
    };

    state = {
        activeTab: null,
    }

    componentDidMount() {
        const { children = [] } = this.props;

        const activeTab = this.getChildrenLabels(children)[0];

        this.setActiveTab(activeTab);
    }

    getChildrenLabels = children => children.map(({ props }) => props.label)

    setActiveTab = activeTab => {
        const { activeTab: currentTab } = this.state;

        if (currentTab !== activeTab) {
            this.setState({
                activeTab,
            });
        }
    }

    renderTabs = () => {
        const { children = [] } = this.props;
        const { activeTab } = this.state;

        return this.getChildrenLabels(children).map(navLabel => (
            <TabBarNav
                key={navLabel}
                navLabel={navLabel}
                className={classNames({ active: activeTab === navLabel })}
                onChangeActiveTab={this.setActiveTab}
            />
        ));
    }
    renderActiveTab = () => {
        const { activeTab } = this.state;
        return activeTab;
    }

    render() {
        console.log(this.props)
        const { activeTab } = this.state;
        const {
            children, className, vertical, ...attrs
        } = this.props;

        const classes = classNames(
            'cabinet__history-content',
            className,
            { vertical },
        );
        return (
            <div className={classes} {...attrs}>
                <div className="cabinet__history-active_nav">
                    {this.renderActiveTab()}
                </div>
                <div className="cabinet__history-navigation">
                    {this.renderTabs()}
                </div>
                <div className="cabinet__history-items">
                    {React.Children.map(children, child => React.cloneElement(child, { activeTab }))}
                </div>
            </div>
        );
    }
}

export default TabBar;

Вопрос:
- В целом как работает этот компонент ?

Comments

[WbICHA]

Хорошо работает.

А вообще что значит "как"? Создаётся экземпляр класса и вызываются его методы.

[lookingfor2]

WbICHA, ну например вот этот кусок

{React.Children.map(children, child => React.cloneElement(child, { activeTab }))}

[WbICHA]

lookingfor2, применяется мап на children. В мапе клонирует элементы, запихивая туда activeTab.

[lookingfor2]

WbICHA, спасибо, буду разбираться