Typescript选项卡

直接代码

html部分

  render() {
        let ButArray = this.state.ButArray
        let ContArray = this.state.ContArray
        let ButIndex = this.state.ButIndex
        return (<div className="tabka">

            {ButArray.map((item, index) => <button onClick={this.FnTab.bind(this, index)} key={item.ID} className={ButIndex === index ? "tabka-item ac" : "tabka-item"}>{item.text}</button>)}


            {ContArray.map((item, index) => <div style={{display:ButIndex===index?"block":"none"}} className="content-item">{item.text}</div>)}
        </div>)
    }

js部分

interface Props {

}
interface User {
    ID: string
    text: string
}
interface Conten {
    ID: string
    text: string
}
interface State {
    ButIndex: number,
    ButArray: User[],
    ContArray: Conten[]
}

class NewTab extends Component<Props, State>{
    constructor(props: Props) {
        super(props);

        this.state = {
            ButIndex: 0,
            ButArray: [
                {
                    ID: "a1",
                    text: "按钮一"
                },
                {
                    ID: "a2",
                    text: "按钮二"
                },
                {
                    ID: "a3",
                    text: "按钮三"
                }
            ],
            ContArray: [
                {
                    ID: "b1",
                    text: "内容一"
                },
                {
                    ID: "b2",
                    text: "内容二"
                },
                {
                    ID: "b3",
                    text: "内容三"
                },
            ]
        }
    }
    FnTab(index: number): void {
        this.setState({
            ButIndex: index
        })
    }

css部分

.tabka{
    .tabka-item{
        width: 300px;
        height: 100px;
        background-color: aqua;
    }
    .tabka-item.ac{
        background-color: springgreen;
    }
    .content-item{
        width: 500px;
        height: 300px;
        border: 1px solid #000;
    }

}

应该可以直接使用了

！！！