功能组件问题中的React Map

Question

https://codesandbox.io/s/simple-line-chart-forked-h39zlx?file=/src/App.tsx

如何对App.tsx中的第31行链接使用react map？

const Tabs = [
{
tabname: "tab2"
},
{
tabname: "tab3"
},
{
tabname: "tab4"
}
];
<a to="" className={`tab ${active === "tab2" ? "active" : ""}`} onClick={() => setActive("tab2")}>
Align & Ratio
</a>

Answer 1

如果链接到不属于React应用程序的外部页面，则使用<a>，否则使用<Link>。并使用"；href="其中CCD_ 3和"；to＝"；用CCD_ 4。

{Tabs.map((obj, i) => (
<p key={i} onClick={() => setActive(obj.tabname)} className="tab">
{/* Align & Ratio */}
{obj.tabname}
</p>
))}

https://codesandbox.io/s/simple-line-chart-forked-v25zdp?file=/src/App.tsx