React+tsx实现选项卡功能

最新推荐文章于 2025-04-09 09:45:29 发布

原创最新推荐文章于 2025-04-09 09:45:29 发布 · 867 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

这个博客展示了如何用TypeScript和React创建一个具备切换功能的标签页组件。文章详细介绍了组件的状态管理，包括按钮列表和内容列表的定义，以及状态更新的方法。同时，通过CSS对选中按钮和内容的样式进行了定制，实现了点击按钮显示对应内容的效果。

tsx代码

import { Component } from "react";
import './index.less'

interface Props {

}
interface User {
    ID: string,
    text: string
}
interface Con {
    ID: string,
    text: string
}
interface State {
    ButtonIndex: number
    ButtonList: User[]
    ContentList: Con[]
}

class Tab extends Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            ButtonIndex: 0,
            ButtonList: [
                { ID: "a1", text: "按钮1" },
                { ID: "a2", text: "按钮2" },
                { ID: "a3", text: "按钮3" }
            ],
            ContentList: [
                { ID: "b1", text: "内容1" },
                { ID: "b2", text: "内容2" },
                { ID: "b3", text: "内容3" }
            ]
        }
    }
    FnTab(index: number): void {
        this.setState({
            ButtonIndex: index
        })
    }
    render() {
        let ButtonList = this.state.ButtonList;
        let ContentList = this.state.ContentList;
        let ButtonIndex = this.state.ButtonIndex;
        return (
            <div className='tab'>
                {
                    ButtonList.map((item, index) => <button onClick={this.FnTab.bind(this, index)} key={item.ID} className={ButtonIndex === index ? "tab-button ac" : "tab-button"}>{item.text}</button>)
                }
                {
                    ContentList.map((item, index) => <div key={item.ID} className="tab-text" style={{ display: ButtonIndex === index ? "block" : "none" }}>{item.text}</div>)
                }
            </div>
        );
    }
}
export default Tab;

css代码

.tab{
    .tab-button.ac{
        background-color: aquamarine;
    }
    .tab-text{
        width: 160px;
        height: 60px;
        text-align: center;
        display: none;
        border: 1px solid rgb(205, 50, 50);
    }
}