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

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

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

相关文章
|
7月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
132 0
|
7月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
59 1
|
7月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
131 1
|
7月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
7月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
56 0
|
7月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
7月前
|
资源调度 前端开发 JavaScript
React组件
React组件
66 0
|
前端开发
React-父子组件通讯
React-父子组件通讯
56 0
React-父子组件通讯
|
7月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
33 0
|
前端开发
React-跨组件通讯-events
React-跨组件通讯-events
118 1