1、实现顶部tab点击效果

App.js

// App.js
import React, { Component } from 'react'
import TabControl from './TabControl'
export default class App extends Component {
    constructor(props) {
        super(props)
        this.titles = ['连休', '高度', '时尚']
        this.state = {
            currentTitle: this.titles[0],
        }
    }
    render() {
        return (
            <div>
                <TabControl itemClick={index => this.itemClick(index)} titles={this.titles} />
                <h2>{this.state.currentTitle}</h2>
            </div>
        )
    }

    itemClick(index) {
        this.setState({
            currentTitle: this.titles[index]
        });
        console.log(index);
    }
}

style.css

.tab-control {
    display: flex;
    height: 44px;
    line-height: 44px;
}

.tab-item {
    flex: 1;
    text-align: center;
}

.tab-item span {
    padding: 5px 8px;
}

.tab-item.active {
    color: red;
}

.tab-item.active span {
    border-bottom: 3px solid red;
}

TabControl.js

// TabControl.js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './style.css'

export default class TabControl extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentIndex: 0
        }
    }
    render() {
        const { titles } = this.props;
        return (
            <div className="tab-control">
                {
                    titles.map((item, index) => {
                        return (
                            <div className={"tab-item" + (this.state.currentIndex === index ? " active" : "")}
                                key={item}
                                onClick={e => this.itemClick(index)}>
                                <span>{item}</span>
                            </div>)
                    })
                }
            </div>
        )
    }

    itemClick(index) {
        this.setState({
            currentIndex: index
        })
        const { itemClick } = this.props;
        if (itemClick) {
            itemClick(index);
        }
    }
}

TabControl.propTypes = {
    titles: PropTypes.array.isRequired,
    itemClick: PropTypes.func
}

2、React-slot

App.js

// App.js
import React, { Component } from 'react'
import NavBar from './NavBar';
import NavBar2 from './NavBar2';

export default class App extends Component {
    render() {
        return (
            <div>
                <NavBar>
                    <span>aaa</span>
                    <div>bbb</div>
                    <a href="/#">ccc</a>
                </NavBar>
                <NavBar2 leftSlot={<span>aaa</span>} centerSlot={<div>bbb</div>} rightSlot={<a href="/#">ccc</a>}/>
            </div>
        )
    }
}

NavBar.js

// NavBar.js
import React, { Component } from 'react'
export default class NavBar extends Component {
    render() {
        return (
            <div className="nav-item nav-bar">
                <div className="nav-left">{this.props.children[0]}</div>
                <div className="nav-item nav-center">{this.props.children[1]}</div>
                <div className="nav-item nav-right">{this.props.children[2]}</div>
            </div>
        )
    }
}

NavBar2.js

// NavBar2.js
import React, { Component } from 'react'
export default class   extends Component {
    render() {
        const {leftSlot, centerSlot, rightSlot} = this.props;
        return (
            <div className="nav-item nav-bar">
                <div className="nav-left">{leftSlot}</div>
                <div className="nav-item nav-center">{centerSlot}</div>
                <div className="nav-item nav-right">{rightSlot}</div>
            </div>
        )
    }
}

style.css

body {
    padding: 0;
    margin: 0;
}
.nav-bar {
    display: flex;
}
.nav-item {
    line-height: 44px;
    text-align: center;
    height: 44px;
}
.nav-left, .nav-right {
    width: 70px;
    background-color: red;
}
.nav-center {
    flex: 1;
    background-color: blue;
}