1234567891011121314151617181920212223242526272829303132333435 |
- import { useMemo, useState } from 'react';
- import styles from './index.less';
- const TabsContent = (props) => {
- const { defaultActiveKey = '1', center = true, items = {}, onChange } = props;
- const [active, setActive] = useState(defaultActiveKey);
- const renderContent = useMemo(() => {
- return items.find((item) => item.key == active).children;
- }, [active, items]);
- return (
- <div>
- <div
- className={styles.tabsTitle}
- style={center ? { justifyContent: 'center' } : {}}
- >
- {items.map((item) => (
- <div
- key={item.key}
- className={`${styles.tabsItem} ${
- active == item.key ? styles.active : ''
- }`}
- onClick={() => {
- setActive(item.key);
- onChange(item.key);
- }}
- >
- {item.label}
- </div>
- ))}
- </div>
- <div>{renderContent}</div>
- </div>
- );
- };
- export default TabsContent;
|