react+ts版自动轮播选项卡

tsx:

import { Component } from "react";
 import "./tuozhuai.less"
interface Props {
 
}
interface User {
    ID: string,
    text: string
}
interface Con {
    ID: string,
    text: string
}
interface State {
    ButtonIndex: number,
    ButtonList: User[],
    ContentList: Con[],
}
 
class Tab extends Component<Props, State> {
    timer?: NodeJS.Timeout
    constructor(props: Props) {
        super(props);
        this.state = {
            ButtonIndex: 0,
            ButtonList: [
                { ID: "a1", text: "按钮1" },
                { ID: "a2", text: "按钮2" },
                { ID: "a3", text: "按钮3" }
            ],
            ContentList: [
                { ID: "b1", text: "内容1" },
                { ID: "b2", text: "内容2" },
                { ID: "b3", text: "内容3" }
            ]
        }
    }
    FnTab(index: number): void {
        this.setState({
            ButtonIndex: index,
           
        })
       
    }
    componentDidMount() {
        this.FnStart()
    }
    FnStart() {
        this.timer = setInterval(() => {
            this.FnNext()
        }, 1000)
    }
    FnNext() {
        let Index = this.state.ButtonIndex
        if (Index >= this.state.ButtonList.length - 1) {
            Index = 0
        } else {
            Index++
        }
        this.setState({
            ButtonIndex: Index
        })
    }

    render() {
        let ButtonList = this.state.ButtonList;
        let ContentList = this.state.ContentList;
        let ButtonIndex = this.state.ButtonIndex;
        return (
            <div className='tab'>
                {
                    ButtonList.map((item, index) => <button onClick={this.FnTab.bind(this, index)} key={item.ID} className={ButtonIndex === index ? "tab-button ac" : "tab-button"}>{item.text}</button>)
                }
                {
                    ContentList.map((item, index) => <div key={item.ID} className="tab-text" style={{ display: ButtonIndex === index ? "block" : "none" }}>{item.text}</div>)
                }
            </div>
        );
    }
}
export default Tab;