react如何封装一个tabbar

封装 React TabBar 的步骤

创建 TabBar 组件 在 React 中创建一个独立的 TabBar 组件，接收 tabs 数据和当前选中的 tab 作为 props。使用 useState 来管理当前选中的 tab。

import React, { useState } from 'react';

const TabBar = ({ tabs, initialTab }) => {
  const [activeTab, setActiveTab] = useState(initialTab || tabs[0].id);

  return (
    <div className="tab-bar">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
          onClick={() => setActiveTab(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
};

添加样式 为 TabBar 添加基本样式，确保按钮之间有适当的间距，并为活动状态的按钮添加高亮效果。

.tab-bar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f0f0f0;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: #fff;
  cursor: pointer;
}

.tab-button.active {
  background: #007bff;
  color: white;
}

使用 TabBar 组件 在父组件中使用 TabBar，传递 tabs 数据和初始选中的 tab。确保 tabs 数据包含 id 和 label 属性。

const App = () => {
  const tabs = [
    { id: 'home', label: 'Home' },
    { id: 'profile', label: 'Profile' },
    { id: 'settings', label: 'Settings' },
  ];

  return (
    <div>
      <TabBar tabs={tabs} initialTab="home" />
      {/* 根据 activeTab 渲染不同内容 */}
    </div>
  );
};

添加内容切换功能 扩展 TabBar 组件以支持内容切换。可以通过 children 或 render props 模式实现动态内容渲染。

const TabBar = ({ tabs, initialTab, children }) => {
  const [activeTab, setActiveTab] = useState(initialTab || tabs[0].id);

  return (
    <div>
      <div className="tab-bar">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {children.find((child) => child.props.id === activeTab)}
      </div>
    </div>
  );
};

使用示例 在父组件中传递 TabBar 的子组件，每个子组件通过 id 与 tab 关联。

const App = () => {
  const tabs = [
    { id: 'home', label: 'Home' },
    { id: 'profile', label: 'Profile' },
    { id: 'settings', label: 'Settings' },
  ];

  return (
    <TabBar tabs={tabs} initialTab="home">
      <div id="home">Home Content</div>
      <div id="profile">Profile Content</div>
      <div id="settings">Settings Content</div>
    </TabBar>
  );
};

优化与扩展 为 TabBar 添加更多功能，如禁用某些 tab、自定义样式、动画效果等。可以通过 props 传递额外的配置选项。

const TabBar = ({ tabs, initialTab, children, disabledTabs = [] }) => {
  const [activeTab, setActiveTab] = useState(initialTab || tabs[0].id);

  return (
    <div>
      <div className="tab-bar">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`tab-button ${activeTab === tab.id ? 'active' : ''} ${
              disabledTabs.includes(tab.id) ? 'disabled' : ''
            }`}
            onClick={() => !disabledTabs.includes(tab.id) && setActiveTab(tab.id)}
            disabled={disabledTabs.includes(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {children.find((child) => child.props.id === activeTab)}
      </div>
    </div>
  );
};