react+ts:选项卡自动轮播 选项卡

html部分

 render() {
        return (
            <div className="tab">
                <div className="buttonbox">
                    {this.state.Button && this.state.Button.map((item, index) =>
                        <div className={this.state.ButtonIndex === index ? "button ac" : 'button'} key={index} onClick={this.FnTab.bind(this, index)}>{item.txt}</div>
                    )}
                </div>

                {
                    this.state.Content.map((item, index) => <div key={item.id} style={{ display: this.state.ButtonIndex === index ? 'block' : 'none' }} className='content'>{item.txt}</div>)
                }

            </div>
        )
    }

css部分(配置的是less)

//css部分
.tab {
    width: 400px;
    margin: 50px auto;

    .buttonbox {
        display: flex;

        .button {
            width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid rgb(40, 231, 168);
            outline: none;
            text-align: center;
            box-sizing: border-box;
        }

        .button.ac {
            color:red;
            background-color: rgb(187, 255, 0);
        }

    }


    .content {
        display: none;
        width: 400px;
        height: 100px;
        border: 1px solid #000;
        border-top: none;
        font-size: 24px;
        text-align: center;
        line-height: 100px;
    }
}

3.js部分

import { Component } from 'react'
import { connect } from 'react-redux'
import './index.less'
interface Props { }
interface Data {
    id: string
    txt: string
}
interface State {
    ButtonIndex: number
    Button: Data[]
    Content: Data[]

}



class Tab extends Component<Props, State>{
   // 定义数据
    // 定时器
    timer?: NodeJS.Timeout;

    constructor(props: Props) {
        super(props)
        this.state = {
            Button: [
                {
                    id: 'a1',
                    txt: '按钮一'
                },
                {
                    id: 'a2',
                    txt: '按钮二'
                },
                {
                    id: 'a3',
                    txt: '按钮三'
                },
                {
                    id: 'a4',
                    txt: '按钮四'
                },
            ],
            Content: [
                {
                    id: 'b1',
                    txt: '内容一'
                },
                {
                    id: 'b2',
                    txt: '内容二'
                },
                {
                    id: 'b3',
                    txt: '内容三'
                },
                {
                    id: 'b4',
                    txt: '内容四'
                },

            ],
            ButtonIndex: 0
        }


    }
    clearTimer() {
        if (this.timer) {
            clearTimeout(this.timer)
        }
    }
    componentDidMount() {
        this.clearTimer()
        this.FnStart()
    }
    // 开始
    FnStart() {
        this.timer = setInterval(() => {
            this.FnNext()
        }, 1500)

    }
    // 下一个
    FnNext() {
        let Input = this.state.ButtonIndex
        if (Input >= this.state.Button.length - 1) {

            Input = 0
        } else {
            Input++
        }

        this.setState({
            ButtonIndex: Input
        })

    }
    // 选项卡
    FnTab(index: number): void {
        this.clearTimer()
        this.FnStart()
        this.setState({
            ButtonIndex: index
        })
    }
    render() {
        return (
            
          <div>这部分代码就是HTML部分<div/>
        )
    }
}

export default connect((props, state) => Object.assign({}, props, state))(Tab)