React + TypeScript 实现选项卡+自动轮播功能

我怎么越吃越瘦

已于 2022-03-17 16:20:52 修改

阅读量759

点赞数 6

文章标签： typescript react.js javascript

于 2022-03-17 16:14:01 首次发布

本文链接：https://blog.csdn.net/weixin_60011603/article/details/123552978

版权

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）

.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;
}

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.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.setState({
        ButtonIndex: index
    })
}
render() {
    return (
        
      <div>这部分代码就是HTML部分<div/>
    )
  }
}
export default connect((props, state) => Object.assign({}, props, state))(Tab)