react的选项卡

切换不同的选项跳到不同的组件，通过改变state状态值操作

效果图片如下

image.png
image.png

代码如下

import React, { Component } from 'react'
import './css/01-index.css'
import Film from './components/Film'
import Cinemas from './components/Cinemas'
import Center from './components/Center'
export default class app extends Component {
    state = {
        list: [
            {
                id: 1,
                text:"电影"
            },
            {
                id: 2,
                text:"影院"
            },
            {
                id: 3,
                text:"我的"
            }
    ],current:0}

    which() {
       
        switch (this.state.current) {
            case 0: return <Film></Film>
            case 1: return <Cinemas></Cinemas>
            case 2: return <Center></Center>
            default:return null
        }
   }
    render() {
       
    return (
        <div>
           {this.which()}
            <ul className="tab">
                {
                    this.state.list.map((item,index)=>
                        <li key={item.id} onClick={()=>this.handleClick(index)} className={this.state.current===index ? 'active' :''}>{item.text}</li>
                       )
                }
            </ul>
    <div>
            {/* {
                this.state.current==0&& <Film></Film>
            }
            {
                this.state.current==1&& <Cinemas></Cinemas>
            }
            {
                this.state.current==2&& <Center></Center>
            } */}

            </div>
      </div>
    )
    }
    handleClick = (index) => {
        this.setState({
            current:index
        })
        
    }
}