react写一个tab切换
时间: 2023-07-20 17:32:16 浏览: 96
好的,以下是一个简单的React Tab切换组件的示例代码:
```jsx
import React, { useState } from 'react';
const Tab = ({ label, activeTab, onClick }) => {
const isActive = activeTab === label;
return (
<div
className={`tab ${isActive ? 'active' : ''}`}
onClick={() => onClick(label)}
>
{label}
</div>
);
};
const TabContent = ({ children, activeTab, label }) => {
if (activeTab !== label) return null;
return <div className="tab-content">{children}</div>;
};
const Tabs = ({ children }) => {
const [activeTab, setActiveTab] = useState(children[0].props.label);
const onClickTabItem = tab => {
setActiveTab(tab);
};
return (
<div className="tabs">
<div className="tab-list">
{children.map(child => {
const { label } = child.props;
return (
<Tab
key={label}
label={label}
activeTab={activeTab}
onClick={onClickTabItem}
/>
);
})}
</div>
{children.map(child => {
return (
<TabContent
key={child.props.label}
label={child.props.label}
activeTab={activeTab}
>
{child.props.children}
</TabContent>
);
})}
</div>
);
};
export default Tabs;
```
使用时,只需将Tab和TabContent组件作为Tabs组件的子组件即可,例如:
```jsx
import React from 'react';
import Tabs from './Tabs';
const App = () => {
return (
<div>
<Tabs>
<div label="Tab 1">
<h2>Content for Tab 1</h2>
</div>
<div label="Tab 2">
<h2>Content for Tab 2</h2>
</div>
<div label="Tab 3">
<h2>Content for Tab 3</h2>
</div>
</Tabs>
</div>
);
};
export default App;
```
这样就可以实现一个简单的Tab切换组件了。