typescript+reac实现选项卡功能

js代码

import Item from "antd-mobile/lib/popover/Item";
import { Component } from "react";
/* 样式引入 */
import './../css/Index.less'
 
interface Props {
}
interface User {
    ID: string,
    text: string
}
interface Content {
    ID: string
    text: string
}
interface State {
    ButtonIndex: number
    ButtonArray: User[]
    ContentArray: Content[]
}
export default class Index extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            ButtonIndex: 0,
            /* 选项卡标题 */
            ButtonArray: [
                {
                    ID: '001',
                    text: '选项卡一'
                },
                {
                    ID: '002',
                    text: '选项卡二'
                },
                {
                    ID: '003',
                    text: '选项卡三'
                },
            ],
            /* 选项卡内容 */
            ContentArray: [
                {
                    ID: 'a01',
                    text: '内容一'
                },
                {
                    ID: 'a02',
                    text: '内容二'
                },
                {
                    ID: 'a03',
                    text: '内容三'
                },
            ]

        }

    }
  
    FnTab(index: number): void {
        this.setState({
            ButtonIndex: index
        })
    }
    render() {
        return (
            <div className='tab'>
                <div className='tabText'>
                    {this.state.ButtonArray.map((item, index) =>
                        <div className={this.state.ButtonIndex === index ? "tabItem ac" : 'tabItem'}
                            key={item.ID}
                            onClick={this.FnTab.bind(this, index)}>
                            {item.text}
                        </div>
                    )}

                </div>
                <div className='tabContent'>
                    {this.state.ContentArray.map((item, index) =>
                        <div className='conItem'
                            key={item.ID}
                            style={{ display: this.state.ButtonIndex === index ? 'block' : 'none' }}>
                            {item.text}
                        </div>
                    )}

                </div>
            </div>
        )
    }
}

TypeScript具有严格语法规则，声明变量时候必须定义语法类型，负责会报错