React中TypeScript中选项卡(附css样式)

import { Component } from "react";
import './Tab.less'
interface Props{

}
interface User{
    ID:string,
    text:string,
}
interface iText{
    ID:string,
    text:string,
}
interface State{
    ButtonIndex:number,
    ButtonArray:User[],
    TextArray:iText[]
}

class Tab extends Component<Props,State>{
    // eslint-disable-next-line
    constructor(props:Props){
        super(props)
        this.state={
            ButtonIndex:0,
            ButtonArray:[
                {ID:"a1",text:"按钮一"},
                {ID:"a2",text:"按钮二"},
                {ID:"a3",text:"按钮三"}
            ],
            TextArray:[
                {ID:"c1",text:"内容一"},
                {ID:"c2",text:"内容二"},
                {ID:"c3",text:"内容三"}
            ],
        }
    }
    FnTab(index:number):void{
        this.setState({
            ButtonIndex:index
        })
    }
    render(){
        let ButtonArray = this.state.ButtonArray
        let TextArray = this.state.TextArray
        let ButtonIndex = this.state.ButtonIndex
        return (<div className="testtab">
            {
                ButtonArray.map((item,index)=><button key={item.ID} onClick={this.FnTab.bind(this,index)}  className={ButtonIndex===index?"testtab-button ac":"testtab-button"}>{item.text}</button>)
            }
             {
                TextArray.map((item,index)=><div key={item.ID} style={{display:ButtonIndex===index?'block':'none'}} className="testtab-text">{item.text}</div>)
            }
            </div>)
    }
}
export default Tab;

.testtab{
    .testtab-button.ac{
        background-color: salmon;
    }
    .testtab-text{
        width: 300px;
        height: 280px;
        border: 1px solid #000;
    }
}