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

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

变化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


总结

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

相关文章
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
79 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
33 1
|
2月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
93 1
|
2月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
2月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
33 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
2月前
|
资源调度 前端开发 JavaScript
React组件
React组件
49 0
|
2月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
21 0
|
2月前
|
前端开发
react 使用 antd-mobile组件库实现下滑加载数据
react 使用 antd-mobile组件库实现下滑加载数据