如何将React Tabs函数式组件改造为可复用组件？

我是React新手，现有如下React Tabs函数式组件代码：

import { useState } from "react";

export default function TabsComponent() {
    const tabs = [
        { name: "Home", link: "#", content: "Home Content" },
        { name: "About", link: "#", content: "About Content" },
        { name: "Contact", link: "#", content: "Contact Content" },
    ];
    const [openTab, setOpenTab] = useState("Home");

    return (
        <div>
            <div className="container mx-auto">
                <div className="flex flex-col items-center justify-center max-w-xl">
                    <ul className="flex space-x-2">
                        {tabs.map((tab) => (
                            <li key={tab.name}>
                                <a
                                    href={tab.link}
                                    onClick={() => setOpenTab(tab.name)}
                                    className="inline-block px-4 py-2 text-gray-600 bg-white rounded shadow"
                                >
                                    {tab.name}
                                </a>
                            </li>
                        ))}
                    </ul>
                    <div className="p-3 mt-6 bg-white border">
                        {tabs.map((tab) => (
                            <div
                                key={tab.name}
                                className={
                                    tab.name === openTab ? "d-block" : "d-none"
                                }
                            >
                                {tab.content}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

希望将该组件解构改造为可在应用各处复用的组件，请问该如何实现？

核心改造思路 #

要让组件能在多处复用，核心是把硬编码的内容、样式、默认逻辑都改成可配置的Props，让使用组件的地方能按需自定义，同时保留基础的默认行为，保证组件单独使用也能正常工作。

1. 提取动态数据为Props #

把原本固定的tabs数组、默认选中标签值改成组件接收的Props，并设置合理默认值。

2. 支持灵活的内容类型 #

原组件的content只能是字符串，改成支持任意React节点（JSX元素、自定义组件），满足更复杂的内容需求。

3. 开放样式自定义 #

把固定的className拆分为可传入的Props，允许使用方覆盖或扩展样式。

4. 暴露交互回调 #

把标签切换的事件回调开放为Props，方便使用方在切换时执行额外逻辑（比如埋点、数据请求）。

改造后的可复用Tabs组件 #

import { useState } from "react";

// 可选：用TypeScript定义Tab项类型，做类型提示
// type TabItem = {
//   id: string; // 用id代替name作为唯一标识，避免名称重复冲突
//   label: string; // 标签显示文本
//   link?: string; // 可选跳转链接
//   content: React.ReactNode; // 支持任意React内容
// };

export default function Tabs({
  tabs,
  defaultActiveTab = tabs?.[0]?.id, // 默认选中第一个标签
  tabListClassName = "flex space-x-2",
  tabClassName = "inline-block px-4 py-2 text-gray-600 bg-white rounded shadow",
  activeTabClassName = "text-white bg-blue-500", // 选中标签的专属样式
  contentContainerClassName = "p-3 mt-6 bg-white border",
  onTabChange, // 标签切换时的外部回调
}) {
  const [activeTab, setActiveTab] = useState(defaultActiveTab);

  const handleTabClick = (tabId) => {
    setActiveTab(tabId);
    // 如果有外部传入的回调，执行它
    onTabChange?.(tabId);
  };

  return (
    <div className="container mx-auto">
      <div className="flex flex-col items-center justify-center max-w-xl">
        <ul className={tabListClassName}>
          {tabs.map((tab) => (
            <li key={tab.id}>
              <a
                href={tab.link || "#"}
                onClick={(e) => {
                  e.preventDefault(); // 阻止默认跳转（不需要可移除）
                  handleTabClick(tab.id);
                }}
                className={`${tabClassName} ${
                  activeTab === tab.id ? activeTabClassName : ""
                }`}
              >
                {tab.label}
              </a>
            </li>
          ))}
        </ul>
        <div className={contentContainerClassName}>
          {tabs.map((tab) => (
            <div
              key={tab.id}
              className={activeTab === tab.id ? "block" : "hidden"}
            >
              {tab.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

如何使用这个复用组件 #

在任意组件中导入并使用，按需自定义标签内容、样式和行为：

import Tabs from "./Tabs";

function App() {
  const customTabs = [
    {
      id: "home",
      label: "首页",
      content: <div><h2>首页内容</h2><p>这是自定义的首页JSX内容</p></div>,
    },
    {
      id: "about",
      label: "关于我们",
      link: "/about",
      content: <p>关于我们的详细介绍</p>,
    },
    {
      id: "contact",
      label: "联系我们",
      content: <form><input placeholder="输入你的问题" /></form>,
    },
  ];

  const handleTabSwitch = (tabId) => {
    console.log(`切换到标签：${tabId}`);
    // 这里可以添加埋点、数据请求等额外逻辑
  };

  return (
    <div>
      <Tabs
        tabs={customTabs}
        defaultActiveTab="about" // 默认选中"关于我们"
        tabClassName="px-5 py-3 rounded-full"
        activeTabClassName="bg-green-500 text-white"
        onTabChange={handleTabSwitch}
      />
    </div>
  );
}

export default App;

改造关键点说明 #

• 用id代替name作为唯一标识：避免标签名称重复导致的key冲突，适配更复杂的业务场景。
• Props默认值：保证组件在不传入某些Props时也能正常渲染，降低使用门槛。
• 样式合并：通过模板字符串拼接基础样式和激活态样式，既保留默认样式，又允许使用方自定义。
• 阻止默认跳转：针对#链接或不需要跳转的场景，避免页面不必要的滚动。
• 支持React节点内容：让标签内容可以是任意JSX，满足从简单文本到复杂组件的需求。
• 可选回调函数：给使用方预留扩展空间，方便在切换标签时执行额外逻辑。

内容的提问来源于stack exchange，提问作者bv-dev