博客

HTML:

import { Component} from "react";
import './tab.less'

interface Props{
    a:string
}
interface User{
    ID:string
    text:string
}
interface Cont{
    ID:string
    text:string
}
interface State{
    ButtonIndex:number
    ButtonList:User[]
    ContentList:Cont[]

}



class Drag extends Component<Props,State>{
    constructor(props:Props){
        super(props)
        
        this.state={
            ButtonIndex:0,
            ButtonList:[
                {
                    ID:"b01",
                    text:"按钮一"
                },
                {
                    ID:"b02",
                    text:"按钮二"
                },
                {
                    ID:"b03",
                    text:"按钮三"
                }
            ],
            ContentList:[
                {
                    ID:"c01",
                    text:"内容一"
                },
                {
                    ID:"c01",
                    text:"内容一"
                },
                {
                    ID:"c01",
                    text:"内容一"
                }
            ]
        }
    }
    Fntab(index:number){
        this.setState({
            ButtonIndex:index
        })
    }


    render(){
        let ButtonList=this.state.ButtonList
        let ContentList=this.state.ButtonList
        let ButtonIndex=this.state.ButtonIndex

        return(<div>
            {ButtonList.map((item,index)=>
                <button className={ButtonIndex===index?"button-ac":"button-ever"} key={item.ID} onClick={this.Fntab.bind(this,index)}>{item.text}</button>
            )}
            
                    
            {ContentList.map((item,index)=>
                   <div className="cont" style={{display:ButtonIndex===index?"block":"none"}} key={item.ID}>{item.text}</div>
            
            )}


              </div>)
    }
}


export default Drag

CSS:

.button-ac{
    background-color: red;
}
.cont{
    width: 400px;
    height: 300px;
    border: 1px solid #ccc;
    display: none;
}