如何使React Tabs组件作为可重用组件?

Question

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功能组件是可重用的。如何解构整个组件，以便在应用程序的任何地方使用。

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

要求

Answer 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" },
]} />

，如果你想有单独的组件来单独处理它们，你可以将每个部分定义为组件

我做了一件事，你可以在这里看到:https://codesandbox.io/s/material-ui-grid-demo-forked-ob4re4?file=/src/Tab.jsx

Answer 2

有几种方法可以做到这一点。

1. 只需创建一个名为tabs的道具，然后您可以将tabs数组发送给tabs道具。

export default function TabsComponent({tabs}) {
//const tabs = ...  no need for this now..
//rest of code the same
}
//call like
function Home() {
return <TabsComponent tabs={[
{ name: "Home", link: "#", content: "Home Content" },
{ name: "About", link: "#", content: "About Content" },
{ name: "Contact", link: "#", content: "Contact Content" }
]}/>
}

2. 另一个想法是实际使用隐式childrenprop。

export default function TabsComponent({children}) {
//const tabs = ...  no need for this now..
const tabs = children;
//rest of code the same
}
//call like
function Home() {
return <TabsComponent>
{[
{ name: "Home", link: "#", content: "Home Content" },
{ name: "About", link: "#", content: "About Content" },
{ name: "Contact", link: "#", content: "Contact Content" }
]}
</TabsComponent>;
}

3. 另一个选择是实际组成你的组件，所以你可以有下面的东西，但有一点更多的工作需要处理状态等，所以不是一个微不足道的改变，但对于可重用性，我相信是最好的选择。→

function Home() {
return <TabsComponent>
<TabSection name="Home" link="#" default>
Home Content
</TabSection>
<TabSection name="About" link="#">
About Content
</TabSection>
<TabSection name="Contact" link="#">
Contact Content
</TabSection>
</TabsComponent>;
}

我没有显示option的代码。3、因为这比传递一些道具要复杂一些，但我认为这是最好的选择，所以如果你感兴趣，请告诉我们。