用React做一个简单地选项卡实例
时间: 2023-03-28 13:00:43 浏览: 124
好的,以下是一个用 React 做的简单选项卡实例。
首先,我们需要定义一个组件,该组件显示选项卡的标题和内容。
```
import React, { useState } from 'react';
const Tab = ({ title, content }) => (
<div>
<h3>{title}</h3>
<p>{content}</p>
</div>
);
```
接下来,我们需要定义一个选项卡容器组件,该组件将选项卡组合在一起,并允许用户选择要显示的选项卡。
```
const Tabs = ({ tabs }) => {
const [selectedIndex, setSelectedIndex] = useState(0);
return (
<div>
<div>
{tabs.map((tab, index) => (
<button key={index} onClick={() => setSelectedIndex(index)}>
{tab.title}
</button>
))}
</div>
<div>
{tabs[selectedIndex].content}
</div>
</div>
);
};
```
最后,我们可以使用这两个组件来创建一个选项卡。
```
const App = () => (
<Tabs tabs={[
{ title: 'Tab 1', content: 'Content of Tab 1' },
{ title: 'Tab 2', content: 'Content of Tab 2' },
{ title: 'Tab 3', content: 'Content of Tab 3' },
]} />
);
export default App;
```
这就是一个简单的 React 选项卡示例。希望对您有所帮助!