提问人：NoName84 提问时间：8/14/2022 最后编辑：jonrsharpeNoName84 更新时间：8/18/2022 访问量：137
需要循环来简化组件
Need loop to simplify a component
问：
我正在 React JS 中构建一个 Tabs 组件。我想为我的代码创建一个循环，而不是对每个选项卡（标题、内容）进行硬编码。代码正在工作，我需要用循环来简化代码。
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
答：
1赞
suchagunner
8/14/2022
#1
您可以通过将选项卡项作为 props 传递来修改 Tabs Function 组件; 然后，在 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
}
评论
0赞
Thomas
8/14/2022
如果您已经为每个选项卡设置了一个必需的选项卡（您没有将其设置为可选），则使用该选项卡而不是 和 / 作为键。这也打开了 和 up to be ，而不仅仅是字符串。idindextitlecontentcontenttitleReactNode
0赞
Thomas
8/14/2022
#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>
这段代码可能包含错误，我没有测试它，只是快速输入了它。
评论