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

最新推荐文章于 2024-06-26 17:18:07 发布

Stay awake丶

最新推荐文章于 2024-06-26 17:18:07 发布

阅读量155

点赞数

文章标签： typescript react.js javascript

本文链接：https://blog.csdn.net/YanG_2859390447/article/details/123553287

版权

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

摘要由CSDN通过智能技术生成

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: "标题三" }
            ],