如何用循环简化React JS中Tabs组件的硬编码实现

你可以通过定义标签数据数组，再用map()循环渲染标题和内容来简化代码，后续增删标签只需要修改数据数组，不用改动渲染逻辑。

优化后的完整代码 #

import { useState } from "react"
import "./TabsStyles.css"

const Tabs = () => {
    // 统一管理所有标签的标题和内容
    const tabsData = [
        {
            title: "Tab 01",
            content: "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?"
        },
        {
            title: "Tab 02",
            content: "Qquam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?"
        },
        {
            title: "Tab 03",
            content: "PPhic voluptatem aliquam sapiente unde?"
        }
    ]

    // 初始状态设为0（默认选中第一个标签，也可设为null保持原逻辑）
    const [activeTabIndex, setActiveTabIndex] = useState(0)

    const togglerFunction = (index) => {
        setActiveTabIndex(index)
    }

    return (
        <div>
            <div className="c-tabs-main-container">
                <div className="c-tabs-title-container">
                    {/* 循环渲染标签标题 */}
                    {tabsData.map((tab, index) => (
                        <h3 
                            key={index} 
                            onClick={() => togglerFunction(index)}
                        >
                            {tab.title}
                        </h3>
                    ))}
                </div>

                <div className="c-tabs-content-container">
                    {/* 循环渲染标签内容 */}
                    {tabsData.map((tab, index) => (
                        <p 
                            key={index} 
                            className={activeTabIndex === index ? "c-active" : ""}
                        >
                            {tab.content}
                        </p>
                    ))}
                </div>
            </div>        
        </div>
    )
}

export default Tabs

关键改动说明 #

• 数据统一管理：把所有标签的标题和内容放到tabsData数组中，后续新增/删除标签只需修改数组，无需重复编写DOM节点代码
• 循环替代硬编码：通过Array.map()遍历数组自动生成标题和内容节点，大幅减少重复代码
• 状态逻辑优化：将原toggleTabsNumber改为activeTabIndex，用数组索引标记活跃标签，逻辑更贴合循环渲染场景（若需更健壮的逻辑，也可为每个tab添加唯一ID，用ID匹配活跃状态）

内容的提问来源于stack exchange，提问作者NoName84