react使用hook封装一个tab组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>
    )
}