如何在Fluent UI React中使用可折叠列表

在Fluent UI React中使用可折叠列表可以通过Accordion组件实现。Accordion是一个可折叠的面板，可以包含一个或多个折叠的节(section)。每个节可以包含标题和内容。

首先，确保已安装Fluent UI React库。可以使用npm安装：

npm install @fluentui/react

接下来，导入所需的组件：

import { Accordion, Text } from '@fluentui/react';

然后，创建一个可折叠列表，并指定节的标题和内容：

const sections = [
  {
    title: 'Section 1',
    content: 'Content for Section 1',
  },
  {
    title: 'Section 2',
    content: 'Content for Section 2',
  },
  // 可以添加更多的节
];

const renderSections = sections.map(section => ({
  title: section.title,
  content: { content: <Text content={section.content} /> },
}));

const App = () => {
  return (
    <Accordion
      defaultActiveIndex={[0]} // 默认展开的节的索引，可以根据需要设置
      panels={renderSections} // 渲染的节的数组
    />
  );
};

export default App;

在上面的代码中，我们创建了一个名为sections的数组，其中包含两个节的标题和内容。然后，我们使用map方法将它们转换为Accordion组件所需的格式。

在Accordion组件中，我们通过defaultActiveIndex属性指定默认展开的节的索引。在这个例子中，我们将第一个节设为默认展开。

最后，我们将panels属性设置为转换后的节数组，从而渲染可折叠列表。

在Fluent UI React中，Accordion组件提供了许多其他配置选项和事件处理函数，以满足各种需求。你可以在Fluent UI的官方文档中找到更多关于Accordion组件的信息：

Fluent UI Accordion