syncfusion-react-accordion

实现 Syncfusion React Accordion

React Accordion 组件提供了一种简洁、有序的方式，可在可折叠面板中展示内容。它非常适合用少量代码创建可展开的内容区块、常见问题、多步骤表单和导航菜单。

组件概述

Accordion 组件会呈现一组可折叠面板，其中：

• 每个面板都有一个标题（单击可切换）和一个内容区域
• 标题可以是简单文本，也可以使用自定义模板
• 内容可以是静态的、动态的，也可以由其他 React 组件渲染
• 支持单项展开模式（一次展开一个面板）或多项展开模式（可同时展开多个面板）
• 内置动画可实现流畅的展开/折叠过渡效果
• 完整支持键盘导航和无障碍功能

文档和导航指南

入门

📄 阅读： references/getting-started.md

阅读时机： 首次设置 Accordion 组件时

• 安装软件包 (@syncfusion/ej2-react-navigations)
• 导入 CSS 并配置主题（Tailwind、Bootstrap）
• 两种初始化方法（Items API 或 HTML 标记）
• 配置项设置（header、content、cssClass、disabled、expanded）
• 使用示例进行基本组件设置
• 首次渲染和最简可运行示例

展开模式

📄 阅读： references/expand-modes.md

阅读时机： 控制同时展开的面板数量时

• 单项展开模式（一次仅展开一个面板）
• 多项展开模式（默认模式，可同时展开多个面板）
• 使用 expandedIndices 属性设置初始展开状态
• 单击标题时的切换行为
• 选择每种模式的适用场景
• 始终保持一个面板展开的模式

动画效果

📄 阅读： references/animation-effects.md

阅读时机： 自定义面板过渡效果和视觉效果时

• 默认动画（展开时使用 SlideDown，折叠时使用 SlideUp）
• 从可用动画效果中进行选择（FadeIn、ZoomIn 等）
• 配置缓动和持续时间属性
• 分别控制展开/折叠动画
• 完全禁用动画
• 性能注意事项

内容加载

📄 阅读： references/content-loading.md

阅读时机： 动态加载内容或从外部来源加载内容时

• 使用 addItem() 方法动态加载 Accordion 项
• 从数据源加载内容（dataSource 属性）
• 通过 HTTP 请求和 POST 获取内容
• 基于模板进行渲染（headerTemplate、itemTemplate）
• 在面板中渲染其他 React 组件
• 延迟加载和延后加载内容的模式

事件和生命周期

📄 阅读： references/events-lifecycle.md

阅读时机： 处理用户交互和组件生命周期时

• 组件生命周期事件（created、destroyed）
• 展开/折叠事件（expanding、expanded）
• 单击事件处理（clicked）
• 事件参数和属性
• 使用 event.cancel 阻止默认操作
• 实际事件模式和示例

样式和自定义

📄 阅读： references/styling-customization.md

阅读时机： 自定义外观并与设计系统集成时

• 用于设置样式的 CSS 类（标题、面板、内容区域）
• 内置主题选项和主题切换
• 使用 CSS 和工具进行自定义样式设置（Tailwind、Bootstrap）
• RTL（从右向左）支持
• 响应式设计模式
• 使用 cssClass 属性设置自定义样式

高级功能

📄 阅读： references/advanced-features.md

阅读时机： 构建复杂布局并优化性能时

• 组件方法（expandItem、enableItem、hideItem 等）
• 嵌套手风琴和分层结构
• React Hooks 集成（useState、useRef、useEffect）
• 键盘导航行为
• 无障碍功能（ARIA 属性、屏幕阅读器）
• 优化大型手风琴列表的性能
• 自定义展开/折叠操作模式

---

快速入门示例

包含三个可折叠面板的基础手风琴：

import React from 'react';
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';
import '@syncfusion/ej2-popups/styles/tailwind3.css';
import '@syncfusion/ej2-react-navigations/styles/tailwind3.css';

export default function App() {
  return (
    <AccordionComponent expandMode='Multiple'>
      <AccordionItemsDirective>
        <AccordionItemDirective 
          header='HTML' 
          content='HTML is a markup language used to create web pages.' 
        />
        <AccordionItemDirective 
          header='CSS' 
          content='CSS is used to style HTML elements and create layouts.' 
        />
        <AccordionItemDirective 
          header='JavaScript' 
          content='JavaScript adds interactivity to web applications.' 
        />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
}

常见模式

模式 1：常见问题解答部分（单项展开模式）

打开新问题时，其他问题会自动折叠：

<AccordionComponent expandMode='Single'>
  <AccordionItemsDirective>
    <AccordionItemDirective header='What is React?' content='React is a JavaScript library for building UIs with components.' />
    <AccordionItemDirective header='What is JSX?' content='JSX is a syntax extension for writing HTML-like code in JavaScript.' />
  </AccordionItemsDirective>
</AccordionComponent>

模式 2：持续展开（多项展开模式）

所有面板都可以同时保持展开：

<AccordionComponent expandMode='Multiple'>
  <AccordionItemsDirective>
    <AccordionItemDirective expanded={true} header='Features' content='...' />
    <AccordionItemDirective expanded={true} header='Installation' content='...' />
  </AccordionItemsDirective>
</AccordionComponent>

模式 3：默认展开状态

加载时预先展开特定面板：

<AccordionItemDirective 
  expanded={true}
  header='Quick Start' 
  content='This section opens by default.' 
/>

---

关键属性和方法

组件属性

属性	类型	用途	默认值
expandMode	'Single' | 'Multiple'	控制单个/多个面板的展开	'Multiple'
expandedIndices	number[]	初始展开项的索引数组	[]
animation	AnimationSettings	展开/折叠动画配置	SlideDown/SlideUp
dataSource	Object[]	用于数据绑定的项数组	[]
headerTemplate	string | function	所有项的自定义标题模板	null
itemTemplate	string | function	用于渲染的自定义项模板	null
height	string | number	组件高度，单位为 px/%	'auto'
width	string | number	组件宽度，单位为 px/%	'100%'
enableHtmlSanitizer	boolean	清理不受信任的 HTML 内容	true
enablePersistence	boolean	在重新加载期间保留展开状态	false
enableRtl	boolean	启用从右到左的布局	false
locale	string	国际化区域代码	''

项属性

属性	类型	用途	默认值
header	string	项标题文本（支持 HTML）	-
content	string	项内容文本（支持 HTML）	-
expanded	boolean	设置项的初始展开状态	false
disabled	boolean	禁用特定手风琴项	false
cssClass	string	项的自定义 CSS 类	-

组件方法

方法	参数	用途
addItem()	item, index (optional)	添加新的手风琴项
removeItem()	index	移除指定索引处的项
enableItem()	index, isEnable	启用/禁用特定项
hideItem()	index, isHidden	显示/隐藏特定项
expandItem()	isExpand, index (optional)	展开/折叠项
select()	index	将焦点设到项标题
destroy()	none	从 DOM 中移除组件

---

常见用例

用例	模式	关键功能
常见问题解答部分	单项	同一时间仅显示一个问题
设置面板	多项	同时勾选多个选项
多步骤表单	单项	引导用户依次完成步骤
内容整理器	多项	一次浏览多个主题
导航菜单	单项	类似树形结构的分层导航
数据仪表板	多项	同时查看多个数据部分

---

后续步骤

1. 从入门指南开始，设置你的第一个 Accordion
2. 选择展开模式，以适应你的用例
3. 添加动画，提升体验并提供用户反馈
4. 动态加载内容，如果使用数据源
5. 自定义样式，使其符合你的设计系统
6. 探索高级功能，以应对复杂场景

需要帮助？请根据你想要构建的内容，查看上面的具体参考文件！