react使用hook封装一个tab组件

react使用hook封装一个tab组件

Tabbar.jsx

import PropsTypes from "prop-types";
import React, { useEffect, useState } from 'react';
export default function Tabbar(props) {
  const {  tabData , current } = props
  const [currentTab,setCurrentTab] = useState('test')
    const tabchange = (item) => {
      setCurrentTab(item.key)
    }
    useEffect(()=>{
      setCurrentTab(current)
    },[current])
    return (
        <div style={{display: 'flex',justifyContent: 'space-around',alignItems: 'center'}}>
          {
            tabData.map(item=>{
              return (
                <div
                  style={{
                    flex:'1',textAlign:'center',marginRight:'5px',cursor:'pointer',
                    color: item.key === currentTab ? 'red' : '#000',
                    background: item.key === currentTab ? '#ccc' : '#eee',
                  }}
                  key={item.key}
                  onClick={ () => tabchange(item) }
                >
                  { item.name }
                </div>
              )
            })
          }
        </div>
    )
}

Tabbar.propTypes = {
  current:  PropsTypes.oneOfType([PropsTypes.string, PropsTypes.number]),
  tabData: PropsTypes.array.isRequired
};
Tabbar.defaultProps = {
  tabData: [
    {
      name:'测试1',
      key:'test1'
    },
    {
      name:'测试2',
      key:'test2'
    },
  ],
  current:''
};

使用组件

import React from 'react';
import Tabbar from "../tabbar/Tabbar";
export default function App(props) {
  const tabData = [
    {
      name:'篮球',
      key:'1'
    },
    {
      name:'足球',
      key:'2'
    },
    {
      name:'排球',
      key:'3'
    }
  ]
  const current = '2'

    return (
        <div className='content'>
          <Tabbar tabData={tabData} current={current} ></Tabbar>
          <div style={{marginBottom: '10px'}}></div>
          <Tabbar></Tabbar>
        </div>
    )
}

效果