React实战：实现移动端Tab - Bar选项卡栏布局全解析

这里是一个简单的使用React实现移动端tab-bar选项卡布局的示例代码： ```jsx import React, { useState } from 'react'; const TabBar = () => { const [activeTab, setActiveTab] = useState(1); const handleTabClick = (tabId) => { setActiveTab(tabId); }; return ( <div className="tab-bar"> <div className={activeTab === 1 ? 'tab active' : 'tab'} onClick={() => handleTabClick(1)}>Tab 1</div> <div className={activeTab === 2 ? 'tab active' : 'tab'} onClick={() => handleTabClick(2)}>Tab 2</div> <div className={activeTab === 3 ? 'tab active' : 'tab'} onClick={() => handleTabClick(3)}>Tab 3</div> </div> ); }; export default TabBar; ``` 在这个示例代码中，我们使用useState来跟踪当前活动的选项卡，然后根据activeTab的值来显示不同的选项卡状态。当用户点击不同的选项卡时，我们会调用handleTabClick函数来更新activeTab的值并重新渲染组件。 在CSS中，可以添加如下样式来美化选项卡栏的外观： ```css .tab-bar { display: flex; } .tab { flex: 1; text-align: center; padding: 10px 0; background-color: #f0f0f0; cursor: pointer; } .tab.active { background-color: #007bff; color: #fff; } ``` 在父组件中，可以直接引入TabBar组件来展示tab-bar选项卡布局： ```jsx import React from 'react'; import TabBar from './TabBar'; const App = () => { return ( <div> <h1>Tab Bar Example</h1> <TabBar /> </div> ); }; export default App; ``` 以上便是一个简单的使用React实现移动端tab-bar选项卡布局的示例。您可以根据自己的需求进行定制和扩展。 ######[AI写代码神器 | 1003点数解答 | 2024-12-12 16:52:58]