AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

#yyds干货盘点 React+antDesign封装一个tab组件(类组件)

2023-03-24 246
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： #yyds干货盘点 React+antDesign封装一个tab组件(类组件)

前言

我是歌谣 放弃很容易 但是坚持一定很酷 喜欢我就一键三连哈 微信公众号关注前端小歌谣 在我们的工作生活中 每次学习一个框架我们就不免要封装组件 而具备封装一个完美组件的能力 我称之为"优秀"


简单的父子组件

父组件

<Geyao/>

子组件

import React, { Component } from 'react';
class GeYao extends React.Component {
  render() {
    console.log(this, 'this');
    console.log(this.props, 'props');
    console.log(this.state, 'state');
    return <div>我是歌谣</div>;
  }
}
export default GeYao;

结果

image.png


需求介绍


需要做一个类似于这样的tab切换的组件

image.png


备注:一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。这时候 我们想着这样的数据格式必须给个数组 然后父组件绑定值


变化1

数据格式

const tabs = [
      { key: '', value: '全部' },
      { key: '1', value: '已审核' },
      { key: '2', value: '未审核' },
    ];

父组件

<GeYao tabs={tabs} />

子组件


import React, { Component } from 'react';
class GeYao extends React.Component {
  render() {
    const { tabs = [] } = this.props;
    console.log(this, 'this');
    console.log(this.props, 'props');
    console.log(this.state, 'state');
    return (
      <ul>
        {tabs.map((item, index) => {
          return <li key={item.key}>{item.name || item.value || ''}</li>;
        })}
      </ul>
    );
  }
}
export default GeYao;

运行结果


image.png

图解示意


image.png

变化2

样式处理的还是不够完美 接下来处理样式

样式处理的还是不够完美 接下来处理样式


变化1

数据格式

const tabs = [
      { key: '', value: '全部' },
      { key: '1', value: '已审核' },
      { key: '2', value: '未审核' },
    ];



父组件

<GeYao tabs={tabs} />


子组件

import React, { Component } from 'react';
class GeYao extends React.Component {
  render() {
    const { tabs = [], styles, itemStyles } = this.props;
    console.log(this, 'this');
    console.log(this.props, 'props');
    console.log(this.state, 'state');
    return (
      <ul
        style={{
          display: 'flex',
          background: '#FFFFFF',
          paddingLeft: '32px',
          width: '100%',
          ...styles,
        }}
      >
        {tabs.map((item, index) => {
          const marginStyle =
            index === 0
              ? {
                  marginLeft: 0,
                }
              : {};
          return (
            <li
              style={{
                color: '#1890FF',
                borderBottom: '2px solid #1890FF',
                padding: '0px 1.5% 8px',
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                ...itemStyles,
                ...marginStyle,
              }}
              key={item.key}
            >
              {item.name || item.value || ''}
            </li>
          );
        })}
      </ul>
    );
  }
}
export default GeYao;



运行结果


image.png

图解

image.png


变化3

数据格式

const tabs = [
      { key: '', value: '全部' },
      { key: '1', value: '已审核' },
      { key: '2', value: '未审核' },
    ];



父组件

<GeYao tabs={tabs} />


子组件

import React, { Component } from 'react';
class GeYao extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: props.selectTab || '',
    };
  }
  /**
   * 切换tab
   * @param {Boolean} doNot 是否不做任何事情，如果存在此值，不执行父组件切换方法,仅仅刷新样式
   */
  handleTabClick(key, doNot) {
    console.log(key, 'key');
    this.setState({
      selectTab: key,
    });
  }
  render() {
    const { selectTab } = this.state;
    const { tabs = [], styles, itemStyles } = this.props;
    return (
      <ul
        style={{
          display: 'flex',
          background: '#FFFFFF',
          paddingLeft: '32px',
          width: '100%',
          ...styles,
        }}
      >
        {tabs.map((item, index) => {
          const marginStyle =
            index === 0
              ? {
                  marginLeft: 0,
                }
              : {};
          return (
            <li
              onClick={() => this.handleTabClick(item.key)}
              style={{
                color: item.key === selectTab ? '#1890FF' : '#000000A6',
                borderBottom: item.key === selectTab ? '2px solid #1890FF' : '',
                padding: '0px 1.5% 8px',
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                ...itemStyles,
                ...marginStyle,
              }}
              key={item.key}
            >
              {item.name || item.value || ''}
            </li>
          );
        })}
      </ul>
    );
  }
}
export default GeYao;



运行结果

image.png


图解


image.png

变化4

数据格式

const tabs = [
      { key: '', value: '全部' },
      { key: '1', value: '已审核' },
      { key: '2', value: '未审核' },
    ];



父组件

<GeYao tabs={tabs} onTabSearch={this.handleTabChange} />


子组件

import React, { Component } from 'react';
class GeYao extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: props.selectTab || '',
      mouseOverTable: '',
    };
  }
  /**
   * 切换tab
   * @param {Boolean} doNot 是否不做任何事情，如果存在此值，不执行父组件切换方法,仅仅刷新样式
   */
  handleTabClick(key, doNot) {
    console.log(key, 'key');
    this.setState({
      selectTab: key,
    });
    if (!doNot) {
      try {
        this.props.onTabSearch(key);
      } catch (error) {}
    }
  }
  render() {
    const { selectTab, mouseOverTable } = this.state;
    const { tabs = [], styles, itemStyles } = this.props;
    return (
      <ul
        style={{
          display: 'flex',
          background: '#FFFFFF',
          paddingLeft: '32px',
          width: '100%',
          ...styles,
        }}
      >
        {tabs.map((item, index) => {
          const marginStyle =
            index === 0
              ? {
                  marginLeft: 0,
                }
              : {};
          return (
            <li
              onMouseOver={() => this.setState({ mouseOverTable: item.key })}
              onMouseLeave={() => this.setState({ mouseOverTable: 'mouseLeave' })}
              onClick={() => this.handleTabClick(item.key)}
              style={{
                color:
                  item.key === selectTab || item.key === mouseOverTable ? '#1890FF' : '#000000A6',
                borderBottom: item.key === selectTab ? '2px solid #1890FF' : '',
                padding: '0px 1.5% 8px',
                cursor: 'pointer',
                whiteSpace: 'nowrap',
                ...itemStyles,
                ...marginStyle,
              }}
              key={item.key}
            >
              {item.name || item.value || ''}
            </li>
          );
        })}
      </ul>
    );
  }
}
export default GeYao;



运行结果

image.png


图解

image.png


总结

我是歌谣 放弃很容易 但是坚持一定很酷 谢谢你的鼓励 微信公众号前端小歌谣 加入前端巅峰交



文章标签：
前端开发
数据格式
关键词：
React Native tab
React Native类
React Native组件类
React Native封装
React Native封装组件
前端歌谣
目录
相关文章
m0_黎明
|
8月前
|
前端开发
React查询、搜索类功能的实现
React查询、搜索类功能的实现
m0_黎明
71 0
夏天49597
|
3月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式，以纯函数的形式返回JSX，易于理解与维护，适用于简单的UI逻辑。类组件则是基于ES6类实现的，需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异，并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性，最后给出了相应的解决方法。通过学习，开发者可以根据具体需求选择合适的组件类型。
夏天49597
81 8
六卿
|
4月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design（antd）的Select组件进行二次封装，包括创建MSelect组件、定义默认属性、渲染Select组件，并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
六卿
134 2
react对antd中Select组件二次封装
六卿
|
4月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径，设置组件props的默认值，以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例，包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
六卿
100 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
你都不懂
|
3月前
|
前端开发
react 封装防抖
react 封装防抖
你都不懂
39 4
天下第一二
|
4月前
|
前端开发
react学习（14）类式组件的构造器与props
react学习（14）类式组件的构造器与props
天下第一二
58 6
石小石Orz
|
5月前
|
前端开发 JavaScript
React类组件props的使用(五)
【8月更文挑战第14天】React类组件props的使用(五)
石小石Orz
55 1
React类组件props的使用(五)
六卿
|
4月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件，包括参数和方法，如行选择（rowSelection）、页码（pageNum）、页面大小（pageSize）、分页方法等，以简化在不同表格组件中的重复代码。
六卿
84 0
wljslmz
|
5月前
|
前端开发 JavaScript
React 中的函数组件和类组件
【8月更文挑战第31天】
wljslmz
78 0
土木林森
|
5月前
|
前端开发 JavaScript 开发者
React组件入门秘籍：函数组件、类组件、高阶组件，一文让你彻底解锁！
【8月更文挑战第24天】React是一款广受好评的JavaScript库，其核心特色在于组件化开发模式。React组件作为应用程序的基础单元，不仅能够处理特定业务逻辑还能实现界面展示。本文深入浅出地介绍了React组件的概念、创建方式及其应用场景。
土木林森
58 0

热门文章

最新文章

  • 1
    React 按钮组件 Button
  • 2
    React 对话框组件 Dialog
  • 3
    React 面包屑组件 Breadcrumb 详解
  • 4
    React 文件上传组件 File Upload
  • 5
    React 中的多选按钮（Checkbox）
  • 6
    React 单选按钮 Radio Button 详解
  • 7
    React 日期时间选择器 (DateTime Picker): 从基础到高级
  • 8
    React组件的最佳实践
  • 9
    React 步骤条组件 Stepper 深入解析与常见问题
  • 10
    React 文件上传组件 File Upload
  • 1
    使用React Native进行跨平台移动开发
    79
  • 2
    React Hooks实战：从useState到useContext深度解析
    114
  • 3
    在回调函数中重新渲染React组件
    60
  • 4
    React 项目用过什么脚手架（本题是开放性题目）
    63
  • 5
    React中的DOM diff算法是如何工作的
    64
  • 6
    react中JSX的详解
    76
  • 7
    react中的useEffect的使用
    68
  • 8
    写出易维护的代码｜React开发的设计模式及原则
    121
  • 9
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    114
  • 10
    【TypeScript技术专栏】TypeScript与React的完美结合
    120

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战
  • 前端开发CSS基础
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月