react多页签导航
时间: 2023-06-29 15:16:39 浏览: 63
在React中实现多页签导航可以使用第三方库如 react-tabs 或者自己实现。以下是一个简单的自己实现多页签导航的示例代码:
```
import React, { useState } from 'react';
const Tab = ({ label, activeTab, onClick }) => {
const handleClick = () => {
onClick(label);
};
return (
<div
className={`tab ${activeTab === label ? 'active' : ''}`}
onClick={handleClick}
>
{label}
</div>
);
};
const Tabs = ({ children }) => {
const [activeTab, setActiveTab] = useState(children[0].props.label);
const onClickTab = (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={onClickTab}
/>
);
})}
</div>
<div className="tab-content">
{children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
);
};
export default Tabs;
```
使用方式:
```
import React from 'react';
import Tabs from './Tabs';
const App = () => {
return (
<Tabs>
<div label="Tab 1">
Content of Tab 1
</div>
<div label="Tab 2">
Content of Tab 2
</div>
<div label="Tab 3">
Content of Tab 3
</div>
</Tabs>
);
};
export default App;
```
通过以上代码可以实现一个简单的多页签导航。你可以根据自己的需求进行修改和优化。