React开发FAQs页面层级嵌套Tabs（子标签）实现方案咨询

实现层级Tabs效果方案 #

你可以直接复用现有Tabs、Panel组件，调整数据关联与页面结构即可完成需求，无需重写基础组件逻辑：

步骤1：调整data.jsx的层级关联 #

给id为7、8、9的子标签数据添加parentId字段关联父标签id=6，同时统一字段名降低适配成本：

export const events = [
    // 原有id1-6的内容保持不变
    {
      id: 6,
      title: "Assessment Topics",
      description: "Giga uses a system we designed to help you thoroughly share your intelligence. We have created 11 topics to help you get your thoughts into an assessment. The 11 topics are: Context, Perspective, Importance, Wisdom, Insight, Knowledge, News, Current, Future, Risk and Opportunity ",
      category: "Assessment Topics"
    },
    // 调整id7-9的字段
    {
      id: 7,
      parentId: 6,
      title: "Future",
      description: "How can you describe your topic through the lens of the future?",
      category: "Future"
    },
    {
      id: 8,
      parentId: 6,
      title: "Past",
      description: "How can you describe your topic through the lens of the past",
      category: "Future"
    },
    {
      id: 9,
      parentId: 6,
      title: "Opportunity",
      description: "How can you describe your topic through the lens of an opportunity?",
      category: "Future"
    },
];

步骤2：修改Faq.jsx中「Assessment Topics」对应的Panel内容 #

在原有内容下方嵌套一套Tabs组件加载子标签：

<Panel title="Assessment Topics">
  {/* 原有父标签内容保持不变 */}
  {events
    .filter(event => event.category === "Assessment Topics")
    .map(event => {
      return <div key={event.id}>
          <h2> 
          {event.title}
      </h2>
      {event.description}
      </div>;
    })}
  {/* 新增嵌套子Tabs */}
  <Tabs className="sub-tabs">
    {events
      .filter(event => event.parentId === 6)
      .map(subEvent => (
        <Panel key={subEvent.id} title={subEvent.title}>
          <div>{subEvent.description}</div>
        </Panel>
      ))
    }
  </Tabs>
</Panel>

步骤3：可选样式优化 #

在styles.css中添加子标签专属样式，区分父子层级视觉效果：

.sub-tabs ul {
  margin: 12px 0 0 20px;
  font-size: 14px;
}
.sub-tabs .styling-tab {
  padding-left: 20px;
  margin-top: 8px;
}

以上修改完成后，选中「Assessment Topics」标签时就会自动在下方渲染子标签，后续其他顶层标签需要添加子标签时，只要给对应数据加parentId关联，再在对应Panel中嵌套Tabs即可，扩展性更强。

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