react写一个tab切换
时间: 2023-07-20 07:31:25 浏览: 57
好的,这里简单给您介绍一下如何用 React 实现一个 Tab 切换的组件。
首先,我们需要创建一个 Tab 组件,它会包含多个 TabItem 子组件,每个子组件代表一个 Tab 标签。我们可以通过 props 传递需要显示的标签和对应的内容。
组件代码如下:
```jsx
import React, { useState } from 'react';
function Tab(props) {
const [activeIndex, setActiveIndex] = useState(0);
const { tabs } = props;
return (
<div className="tab">
<div className="tab-header">
{tabs.map((tab, index) => (
<div
key={index}
className={`tab-item ${index === activeIndex ? 'active' : ''}`}
onClick={() => setActiveIndex(index)}
>
{tab.title}
</div>
))}
</div>
<div className="tab-content">
{tabs[activeIndex].content}
</div>
</div>
);
}
export default Tab;
```
接下来,我们需要在 CSS 中定义样式来控制 Tab 的显示效果。这里只给出一个简单的样式,您可以根据自己的需求进行修改。
```css
.tab {
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.tab-header {
display: flex;
}
.tab-item {
flex: 1;
padding: 10px;
text-align: center;
cursor: pointer;
}
.tab-item.active {
background-color: #ccc;
}
.tab-content {
padding: 10px;
}
```
最后,我们可以在父组件中使用 Tab 组件,传入需要显示的标签和对应的内容。
```jsx
import React from 'react';
import Tab from './Tab';
function App() {
const tabs = [
{
title: 'Tab 1',
content: 'This is Tab 1 content',
},
{
title: 'Tab 2',
content: 'This is Tab 2 content',
},
{
title: 'Tab 3',
content: 'This is Tab 3 content',
},
];
return (
<div>
<Tab tabs={tabs} />
</div>
);
}
export default App;
```
这样就完成了一个简单的 Tab 切换组件。希望这能对您有所帮助。