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 } = propsconst [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 (<divstyle={{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>)
}

效果