useDynamicList

一个帮助管理动态列表项的 React Hook。

演示

源码
[
  {
    "name": "Alice",
    "age": "20"
  },
  {
    "name": "Bob",
    "age": "21"
  },
  {
    "name": "Charlie",
    "age": "22"
  }
]

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const [list, actions] = useDynamicLis(initialList)

初始列表 InitialList

任意的项目数组,默认为 []unknown[])。

返回值

export interface UseDynamicListReturnsActions<T> { /** * 在指定索引处插入项目 */ insert: (index: number, item: T) => void /** * 合并指定索引处的项目 */ merge: (index: number, items: T[]) => void /** * 替换指定索引处的项目 */ replace: (index: number, item: T) => void /** * 移除指定索引处的项目 */ remove: (index: number) => void /** * 获取指定索引处项目的键 */ getKey: (index: number) => number /** * 获取具有指定键的项目的索引 */ getIndex: (key: number) => number /** * 将项目从旧索引移至新索引 */ move: (oldIndex: number, newIndex: number) => void /** * 将项目添加到列表末尾 */ push: (item: T) => void /** * 从列表末尾弹出项目 */ pop(): void /** * 在列表开头添加项目 */ unshift: (item: T) => void /** * 从列表开头弹出项目 */ shift(): void /** * 根据指定结果对列表进行排序 */ sort: (result: T[]) => T[] /** * 重置列表 */ reset: (newList: T[]) => void /** * 设置新列表 */ setList: ReactSetState<T[]> } export type UseDynamicListReturns<T> = readonly [ /** * 项目列表 */ list: T[], UseDynamicListReturnsActions<T>, ]