React里的tab选项卡方法

简介: React里的tab选项卡方法
import React, { Component } from 'react';
class Copy extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1
    }
  }
  tabFn(index) {
    this.setState({
      current: index
    })
  }
  componentDidMount() {
    this.tabFn(1)
  }
  clsFn(index, curCls, cls) {
    let { current } = this.state
    return current === index ? curCls : cls;
  }
  render() {
    return (
      <div>
        <h1>这是tab选项卡</h1>
        <div className="tab_con">
          <ol>
            <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'curr', '')}>菜单一</li>
            <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'curr', '')}> 菜单二</li>
            <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'curr', '')}> 菜单三</li>
          </ol>
          <ul>
            <li className={this.clsFn(1, 'current', '')}>内容一</li>
            <li className={this.clsFn(2, 'current', '')}>内容二</li>
            <li className={this.clsFn(3, 'current', '')}>内容三</li>
          </ul>
        </div>
      </div>
    )
  }
}
export default Copy;
相关文章
|
2月前
|
存储 前端开发 UED
React 标签页组件 Tab
标签页(Tab)组件是现代Web应用中常见的UI元素,用于在有限空间内展示多个内容面板。本文介绍如何在React中实现功能完善的标签页组件,涵盖基本概念、状态管理、常见问题及解决方案。通过`useState`管理选中标签,使用CSS确保布局一致性和过渡效果,并解决性能和逻辑错误。高级功能如懒加载和持久化选择状态进一步提升用户体验。
66 16
|
2月前
|
前端开发 UED 开发者
React 选项卡组件 Tabs:从基础到优化
本文详细介绍了如何在React中构建一个功能丰富的选项卡组件,包括基础实现、样式美化、常见问题及解决方法。通过逐步讲解,从简单的选项卡组件结构开始,逐步引入样式、性能优化、动态内容加载、键盘导航支持和动画效果,最后讨论了自定义样式的实现。旨在帮助开发者在React项目中高效构建高质量的选项卡组件。
88 18
|
4月前
|
前端开发
|
4月前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
31 1
|
5月前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
81 9
|
6月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
86 5
|
5月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
109 0
|
6月前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
48 1
|
6月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
152 0
|
6月前
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
71 0