如何使用React FAQ Component实现多分类FAQ展示

我正在React项目中使用react-faq-component包创建FAQ页面，目前已实现单分类FAQ展示：

希望实现多分类的问答展示效果，预期如下：

修改后的代码实现 #

原库原生支持多分类结构，只需调整data的结构，将单一rows替换为categories数组即可：

import React, { useState } from 'react';
import FaqData from 'react-faq-component';

function Faq() {
  const [rows, setRowsOption] = useState(null);
  const data = {
    title: 'FAQ (分类展示)',
    // 用categories数组定义多分类
    categories: [
      {
        title: '账户相关',
        rows: [
          {
            title: 'How do I change my password?',
            content: `修改密码的步骤：进入账户设置页面，找到密码修改选项，输入原密码及新密码后提交即可。`,
          },
          {
            title: 'How do I sign up?',
            content:'注册流程：点击页面右上角注册按钮，填写邮箱、密码等信息，完成验证后即可创建账户。',
          },
        ],
      },
      {
        title: '订单相关',
        rows: [
          {
            title: '如何查询订单状态？',
            content: `登录账户后，进入「我的订单」页面，即可查看所有订单的实时状态。`,
          },
          {
            title: '如何申请退款？',
            content:'在订单详情页点击「申请退款」按钮，选择退款原因并提交，审核通过后退款将原路返回。',
          },
        ],
      },
    ],
  };

  return (
    <div>
      <h2 className="section-title">My FAQ's</h2>
      <div className="faq-style-wrapper">
        <FaqData data={data} getRowOptions={setRowsOption} />
      </div>
    </div>
  );
}

export default Faq;

其他可实现需求的库推荐 #

• react-accessible-accordion：轻量级组件，专注无障碍访问支持，可灵活搭建多分类FAQ结构
• react-collapse：基础折叠组件，自由度高，适合自定义多分类FAQ的样式和交互
• Material UI Accordion：若项目已使用Material UI，可直接用官方的Accordion组件组合实现多分类FAQ

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