TypeScript 项目选项卡

最新推荐文章于 2024-04-28 08:11:29 发布

臭宝520

最新推荐文章于 2024-04-28 08:11:29 发布

阅读量152

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.youkuaiyun.com/xiao980522/article/details/121852777

版权

这篇博客探讨了如何利用TypeScript进行前端开发，通过分析`index.tsx`和`index.less`文件，展示了如何结合强类型语言与CSS模块来创建一个功能完善的选项卡组件。内容包括TypeScript在jsx中的应用以及Less样式文件的组织和应用。

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

index.tsx

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

interface Props {

}

interface user {
    id: string,
    text: string
}
interface content {
    id: string,
    text: string
}
interface State {
    ButtonIndex: number,
    ButtonArray: user[],
    ContentArray: content[]
}
class Tab extends Component<Props, State>{
    constructor(props: Props) {
        super(props)
        this.state = {
            ButtonIndex: 0,
            ButtonArray: [
                {
                    id: '01',
                    text: '按钮一'
                },
                {
                    id: '02',
                    text: '按钮二'
                },
                {
                    id: '03',
                    text: '按钮三'
                }
            ],
            ContentArray: [
                {
                    id: 'c1',
                    text: '内容一'
                },
                {
                    id: 'c2',
                    text: '内容二'
                },
                {
                    id: 'c3',
                    text: '内容三'
                }
            ],
        }
    }
    FnTab(index: number): void {
        this.setState({
            ButtonIndex: index
        })
    };
    render() {
        return (
            <div className='tab'>
                {
                    this.state.ButtonArray.map((item, index) => <button key={item.id} onClick={this.FnTab.bind(this, index)} className={this.state.ButtonIndex === index ? 'tab-button ac' : 'tab-button'}>{item.text}</button>)
                }
                {
                    this.state.ContentArray.map((item, index) => <div key={item.id} style={{ display: this.state.ButtonIndex === index ? 'block' : 'none' }} className='tab-content'>{item.text}</div>)
                }

            </div>
        )
    }
}
export default connect((props, state) => Object.assign({}, props, state), {})(Tab)

index.less

.tab {
    .tab-button{
        margin: 10px  10px 0 0;
        cursor: pointer;
    }
    .tab-button.ac {
        background-color: red;
        margin: 10px 10px 0;
        color: #fff;
    }

    .tab-content {
        display: none;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        text-align: center;
        line-height: 200px;
        margin-top: 20px;
        margin-left: 10px;
        font-size: 25px;
    }
}