React+Typescript实现选项卡自动轮播

最新推荐文章于 2023-07-10 11:53:40 发布

Stay awake丶

最新推荐文章于 2023-07-10 11:53:40 发布

阅读量180

点赞数

文章标签： typescript react.js javascript

本文链接：https://blog.youkuaiyun.com/YanG_2859390447/article/details/123553287

版权

本文档介绍了如何结合React与Typescript实现选项卡的自动轮播效果。主要涉及的文件包括About.tsx、about.less以及about.css，详细展示了在项目中设置样式和编写组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

About.tsx部分：

import React, { Component } from "react";
import "./about.less";
// redux
import { connect } from "react-redux";
// import { setName, setAge } from "../store/action";

interface Props {

}

interface State {
    SelectIndex: number,
    BtnList: btn[],
    ContList: cont[],
}
interface btn {
    id: string, btntext: string
}
interface cont {
    id: string, conttext: string
}
class About extends Component<Props, State> {
    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
    timer?: NodeJS.Timeout
    constructor(props: Props) {
        super(props)
        this.state = {
            SelectIndex: 0,
            BtnList: [
                { id: "1", btntext: "标题一" },
                { id: "2", btntext: "标题二" },
                { id: "3", btntext: "标题三" }
            ],
            ContList: [
                { id: "1", conttext: "内容一" },
                { id: "2", conttext: "内容二" },
                { id: "3", conttext: "内容三" }
            ]
        }
    }
    FnBian(index: number): void {
        this.setState({
            SelectIndex: index
        })
    }

    componentDidMount() {
        this.FnStart()
    }
    // 开始
    FnStart() {
        this.timer = setInterval(() => {
            this.FnNext()
        }, 1000)
    }
    FnNext() {
        let Index = this.state.SelectIndex
        if (Index >= this.state.BtnList.length - 1) {
            Index = 0
        } else {
            Index++
        }
        this.setState({
            SelectIndex: Index
        })
    }
    render() {
        return (
            <div className="about">
                <div className="box">
                    <div className="btn">
                        {this.state.BtnList.map((item, index) => <div className={this.state.SelectIndex === index ? 'btn-item ac' : 'btn-item'} onClick={this.FnBian.bind(this, index)} key={index}>{item.btntext}</div>)}

                    </div>

                    <div className="cont">
                        {this.state.ContList.map((item, index) => <div className="cont-item" style={{ display: this.state.SelectIndex === index ? 'block' : 'none' }} key={index}>{item.conttext}</div>)}
                    </div>

                </div>
            </div>
        );
    }
}

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

about.less部分：

没有配置less的话，下面有css的样式

.about {
    .box{
        width: 610px;
        height: 600px;
        margin:  0 auto;
        .btn {
        display: flex;
        .btn-item {
            width: 200px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 24px;
            border: 2px solid #000;
        }
        .btn-item.ac {
            width: 200px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 24px;
            color: #000;
            background-color: aqua;
        }
    }
    .cont {
        .cont-item {
            text-align: center;
            line-height: 25vh;
            font-size: 24px;
            width: 608px;
            height: 300px;
            border: 2px solid #000;
            display: none;
            border-top: none ;
        }
    }
    }
    
}

about.css部分：

.about .box {
  width: 610px;
  height: 600px;
  margin: 0 auto;
}
.about .box .btn {
  display: flex;
}
.about .box .btn .btn-item {
  width: 200px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 24px;
  border: 2px solid #000;
}
.about .box .btn .btn-item.ac {
  width: 200px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 24px;
  color: #000;
  background-color: aqua;
}
.about .box .cont .cont-item {
  text-align: center;
  line-height: 25vh;
  font-size: 24px;
  width: 608px;
  height: 300px;
  border: 2px solid #000;
  display: none;
  border-top: none ;
}