简介
react-group 是一个用于渲染多个数据的组件，可以方便地将数据分组，并按需展开/折叠。它提供了丰富的配置项，以适应各种数据的展示需求。
安装
在项目目录下执行：
npm install react-group --save
使用
基础用法
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- ---- -------------- ----- ---- - - - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- -- -------- ----- - ------ - ------ ------------ -------- -- - ----- ---------------------- ---------------------- ------ -- - ---- ------------------------ --- ------ -- -------- -- - ------ ------- ----展开代码
以上例子中，通过传入一个数组 data 给 Group 组件，每个元素对应一个分组，title 代表分组的名称，data 代表该分组下的数据。
在 {(group) => ...} 回调函数中，我们根据传入的 group 对象渲染每个分组的内容。
高级用法
react-group 还提供了许多配置项，以便进行更加灵活的展示。下面介绍几个常用的配置项。
defaultExpanded
默认是否展开所有分组，可以设为一个布尔值或一个返回布尔值的函数。当设为函数时，函数接受一个参数 group，表示当前分组。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- ---- -------------- ----- ---- - - - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- -- -------- ----- - ------ - ------ ----------- ------------------------ -- ----------- --- ------ ---- -------- -- - ----- ---------------------- ---------------------- ------ -- - ---- ------------------------ --- ------ -- -------- -- - ------ ------- ----展开代码
在以上例子中，我们通过 defaultExpanded 配置项，将除了 Group 2 以外的分组都默认展开。
expandable
是否开启展开/折叠功能，可以设为一个布尔值或一个返回布尔值的函数。当设为函数时，函数接受一个参数 group，表示当前分组。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- ---- -------------- ----- ---- - - - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- -- -------- ----- - ------ - ------ ----------- ------------------- -- ----------- --- ------ ---- -------- -- - ----- ---------------------- ---------------------- ------ -- - ---- ------------------------ --- ------ -- -------- -- - ------ ------- ----展开代码
在以上例子中，我们通过 expandable 配置项，将除了 Group 2 以外的分组都开启展开/折叠功能。
onExpand
展开/折叠分组时的回调函数，接受两个参数 group 和 expanded，分别表示当前分组和当前是否展开。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----- ---- -------------- ----- ---- - - - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- - ------ ------ --- ----- ----- ---- ----- -- -- -------- ----- - -------- ------------------- --------- - --------------------------- -- ---------- - ---------- - --------------- - ------ - ------ ----------- ------------------------ -------- -- - ----- ---------------------- ---------------------- ------ -- - ---- ------------------------ --- ------ -- -------- -- - ------ ------- ----展开代码
在以上例子中，我们添加了一个 handleExpand 函数，当某个分组被展开或折叠时，输出对应的信息。
结语
react-group 提供了方便快捷的多数据分组展示方式，可以帮助大家更好地组织数据，提高页面展示效率。本文介绍了 react-group 的基础用法和一些高级配置项，但 react-group 的功能远不止如此，建议大家前往 GitHub 了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59075
