用react class写选项卡

樱颜

已于 2022-08-03 13:59:27 修改

阅读量284

点赞数 1

文章标签： react.js 前端

于 2022-06-13 09:46:15 首次发布

本文链接：https://blog.csdn.net/weixin_58160355/article/details/125254449

版权

本文档详细介绍了如何在React中使用Class组件来实现功能丰富的选项卡切换功能，包括了TSX和Less的代码示例，展示了如何结合这两者进行前端开发。

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

tsx:

import React, { Component } from "react";
import "./index.less";
import { connect } from "react-redux";
 
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: "A" },
                { id: "2", btntext: "B" },
                { id: "3", btntext: "C" }
            ],
            ContList: [
                { id: "1", conttext: "AAAA" },
                { id: "2", conttext: "BBBB" },