如何使 React Tabs 组件成为可重用组件？答案

【问题标题】：How to make React Tabs component as reusable component?如何使 React Tabs 组件成为可重用组件？
【发布时间】：2022-12-13 21:26:22
【问题描述】：

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>
    );
}

我是 React 的新手，我希望这个 React Tabs 功能组件可以重用。如何解构整个组件以在应用程序中随处使用。

【问题讨论】：

这取决于如何可重用，但关键是它在其 props 中接受 tabs 数组，而不是在组件本身中定义它们。
您可以将选项卡作为属性传递，并根据属性的索引初始化内部 openTab 状态，以便能够定义哪个应该是默认值。这样 Tabs 组件将只关心呈现您作为属性传递的任何结构。
如上所说 -> export default function TabsComponent({tabs}) { ..../*tabs is now a prop*/ } 并使用 -> <TabsComponent tabs={{ name: "Home", link: .....}} />
谁能举个例子？
@Keith 它不工作，你能检查一次吗？

标签： javascript reactjs frontend destructuring react-tabs

【解决方案1】：

你做的很棒，只需将选项卡作为道具传递

像这样：

export default function TabsComponent({tabs}) {
 
  const [openTab, setOpenTab] = useState(tabs[0]);

  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>
  );
}

在其他组件中：

   <TabsComponent  tabs={[
        { name: "Home", link: "#", content: "Home Content" },
        { name: "About", link: "#", content: "About Content" },
        { name: "Contact", link: "#", content: "Contact Content" },
      ]} />

【讨论】：