ReactJS 蓝图 CollapsibleList 组件

ReactJS 蓝图 CollapsibleList 组件是一个基于 ReactJS 框架的可折叠列表组件，用于展示多层级的数据列表，并提供折叠/展开功能。

安装

可以通过 npm 命令行工具进行安装：

npm install collapsible-list --save

使用

引入组件:

import CollapsibleList from 'collapsible-list'

在 React 组件中使用：

<CollapsibleList data={data} />

其中，data 是一个包含多层级数据的数组。

API

Props

| 名称 | 类型 | 默认值 | 描述 | | ------------- | -------- | ------ | ---------------------------- | | data | Array | - | 多层级数据列表 | | handleClick | Function | - | 点击列表项的回调函数 | | isExpandAll | Boolean | false | 是否默认展开所有列表项 | | isAccordion | Boolean | false | 是否折叠其他列表项，只展开一个 | | levelPadding | Number | 20 | 列表项缩进值 | | arrowPosition | String | right | 箭头位置 left 或 right |

data

data 是一个包含多层级数据的数组，每个元素是一个对象，包含以下属性：

| 属性名 | 类型 | 描述 | | ------ | --------- | ------------------------------------------------------------ | | title | String | 列表项标题 | | key | String/Number | 列表项的唯一标识，必填 | | level | Number | 列表项层级，从 1 开始 | | parent | String/Number | 列表项的父级标识，如为一级列表项则为 null | | data | Array | 下级列表项的数据，格式与上级相同。如果该列表项没有下级，无需传递该属性。 |

handleClick

点击列表项的回调函数，接收一个参数，即被点击的列表项的键值，用于实现不同操作。

handleClick = (key) => {
    console.log(`${key} is clicked.`);
}

isExpandAll

是否默认展开所有列表项，默认为 false。

<CollapsibleList data={data} isExpandAll />

isAccordion

是否折叠其他列表项，只展开一个，默认为 false。

<CollapsibleList data={data} isAccordion />

levelPadding

列表项缩进值，默认为 20。

<CollapsibleList data={data} levelPadding={30} />

arrowPosition

箭头位置，可选值：left 或 right，默认为 right。

<CollapsibleList data={data} arrowPosition="left" />

示例

import React from 'react';
import CollapsibleList from 'collapsible-list';

const data = [
  {
    key: '1',
    title: '一级列表项1',
    level: 1,
    parent: null,
    data: [
      {
        key: '1-1',
        title: '二级列表项1-1',
        level: 2,
        parent: '1',
        data: [
          {
            key: '1-1-1',
            title: '三级列表项1-1-1',
            level: 3,
            parent: '1-1',
          },
          {
            key: '1-1-2',
            title: '三级列表项1-1-2',
            level: 3,
            parent: '1-1',
          },
        ],
      },
      {
        key: '1-2',
        title: '二级列表项1-2',
        level: 2,
        parent: '1',
        data: [
          {
            key: '1-2-1',
            title: '三级列表项1-2-1',
            level: 3,
            parent: '1-2',
          },
          {
            key: '1-2-2',
            title: '三级列表项1-2-2',
            level: 3,
            parent: '1-2',
          },
        ],
      },
    ],
  },
  {
    key: '2',
    title: '一级列表项2',
    level: 1,
    parent: null,
    data: [
      {
        key: '2-1',
        title: '二级列表项2-1',
        level: 2,
        parent: '2',
      },
      {
        key: '2-2',
        title: '二级列表项2-2',
        level: 2,
        parent: '2',
      },
    ],
  },
];

class App extends React.Component {
  handleClick = (key) => {
    console.log(`${key} is clicked.`);
  };

  render() {
    return (
      <div style={{ margin: 20 }}>
        <h2>ReactJS 蓝图 CollapsibleList 组件</h2>
        <CollapsibleList data={data} handleClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

总结

ReactJS 蓝图 CollapsibleList 组件提供折叠/展开功能，适用于多层级数据列表的展示，具有丰富的配置项，使用简单方便。如果你需要展示多层级的数据，并且需要进行折叠/展开操作，不妨试试这个组件。