需要循环来简化组件

Question

我正在React JS中构建一个Tabs组件。我想为我的代码创建一个循环，而不是对每个选项卡(标题、内容(进行硬编码。代码正在工作，我需要用循环来简化代码。

选项卡组件

import { useState } from "react"
import "./TabsStyles.css"
const Tabs = () => {
const [toggleTabsNumber, setToggleTabsNumber] = useState(null)
const togglerFunction = (index) => {
setToggleTabsNumber(index)
}
return (
<div>
<div className="c-tabs-main-container">
<div className="c-tabs-title-container">
<h3 onClick={() => togglerFunction(1)}>Tab 01</h3>
<h3 onClick={() => togglerFunction(2)}>Tab 02</h3>
<h3 onClick={() => togglerFunction(3)}>Tab 03</h3>
</div>
<div className="c-tabs-content-container">
<p className={toggleTabsNumber === 1 ? "c-active"  : ""}>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut similique asperiores nihil ullam non ad, dolorem quam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?</p>
<p className={toggleTabsNumber === 2 ? "c-active"  : ""}>Qquam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?</p>
<p className={toggleTabsNumber === 3 ? "c-active"  : ""}>PPhic voluptatem aliquam sapiente unde?</p>
</div>
</div>        
</div>
)
}
export default Tabs

Answer 1

您可以通过将选项卡项作为道具传递来修改选项卡函数组件；然后，在jsx中循环它们。

const Tabs = ({ tabs }) => {
const [toggleTabsNumber, setToggleTabsNumber] = useState(null);
const togglerFunction = (index) => {
setToggleTabsNumber(index);
};
const isActiveTab = useCallback(
(tabId) => {
return toggleTabsNumber === tabId;
},
[toggleTabsNumber]
);
return (
<div className="c-tabs-main-container">
<div className="c-tabs-title-container">
{tabs.map((tab, indx) => (
<h3
key={`tab-title-${indx}-${tab.title}`}
onClick={() => {
togglerFunction(tab.id);
tab?.onClick?.();
}}
>
{tab.title}
</h3>
))}
</div>
<div className="c-tabs-content-container">
{tabs.map((tab, indx) => (
<p key={`tab-content-${indx}-${tab.content}`} className={isActiveTab(tab.id) ? 'c-active' : ''}>
{tab.content}
</p>
))}
</div>
</div>
);
};

选项卡界面将类似于：-

interface Tab {
id: string
title: string
content: string
onClick?: function
}

Answer 2

像这样的东西作为一个快速草稿怎么样

import { useState } from "react"
import "./TabsStyles.css"
export const Tabs = (props) => {
const [activeTab, setActiveTab] = useState(0);
const tabs = React.Children.toArray(props.children)
.filter(child => React.isValidElement(child) && child.type === Tab);
return (
<div>
<div className="c-tabs-main-container">
<div className="c-tabs-title-container">
{
tabs.map((tab, index) => <h3 key={tab.key ?? index} onClick={() => setActiveTab(index)}>{
tab.title
}</h3>)
}
</div>
<div className="c-tabs-content-container">
{
tabs.map((tab, index) => <div key={tab.key ?? index} className={activeTab === index ? "c-active" : ""}>{
tab.children
}</div>)
}
</div>
</div>
</div>
)
}
// a vessel to collect the title and tab content as JSX and a marker to determine <Tab />s from possible garbage.
export const Tab = (props) => null;

然后像这样使用：

<Tabs>
<div> this will be ignored; only Tabs are rendered.</div>
<Tab title="Tab 01">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut similique asperiores nihil ullam non ad, dolorem quam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?
</Tab>
<Tab title="Tab 02">
Qquam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?
</Tab>
<Tab title="Tab 03">
PPhic voluptatem aliquam sapiente unde?
</Tab>
</Tabs>

这段代码可能包含错误，我没有测试它，只是快速地输入了它