07_组件作用域插槽

import React, { Component } from 'react'
import TabControl from './TabControl'

export class App extends Component {
    constructor(){
        super()
        this.state = {
            titles:["流行","新款","精选"],
            tabIndex:0
        }
    }
    changeTabIndex(tabIndex){
        this.setState({tabIndex})
    }
    getTabItem(item){
      console.log(item);
      if(item === "流行"){
       return  <p>{item}</p>
      }else if(item === "新款"){
        return <button>{item}</button>
      }else{
        return <i>{item}</i>
      }
    }
  render() {
    const {titles,tabIndex} = this.state
    return (
      <div>
        <TabControl titles = {titles} tabClick = {index=>{this.changeTabIndex(index);}} itemType = {e=>this.getTabItem(e)} />
        <h1>{titles[tabIndex]}</h1>
      </div>
    )
  }
}

export default App

import React, { Component } from 'react'
import "./tab-contorl.css"


export class TabControl extends Component {
  constructor(){
    super()
    this.state = {
      currentIndex : 0
    }
  }
  ShowItem(item,index){
    this.props.tabClick(index)
    this.setState({
      currentIndex:index
    })
  }
  render() {
    //dob
    const {titles,itemType} = this.props
    const {currentIndex} = this.state
    return (
      <div className='tab-contorl'>
          {titles.map((item,index)=>
          { return <div className={`item ${currentIndex === index?"active":""}`} key={item} onClick={()=>{this.ShowItem(item,index)}}>
            {/* <span className="text">{item}</span> */}
            {itemType(item)}
            </div>})}
      </div>
    )
  }
}

export default TabControl

.tab-contorl{
   display: flex;
   height: 40px;
   align-items: center;
   text-align: center;
}
.tab-contorl .item{
    flex: 1;
}
.tab-contorl  .active{
    color: red;
    border-bottom: 3px solid red;
}
.tab-contorl span{
    padding: 5px;
}