useTreeLoad

用于树形结构异步加载数据的 Hooks

示例

点我查看代码

import { useTreeLoad } from "@wenonly/react-hooks";
import { delayMs } from "@wenonly/utils";
import { Tree } from "antd";
import React from "react";

const RUseTreeLoad = () => {
  const { treeData, loading, refresh, loadData, loadedKeys } = useTreeLoad({
    getRequest: (parent) => {
      // 如果存在父节点，则应用子节点加载逻辑
      if (parent) {
        return async ({ page, size }) => {
          await delayMs(1000);
          return Promise.resolve({
            list: [
              {
                label: "子" + page,
                value: "child" + page,
              },
              {
                label: "子" + page + "_1",
                value: "child" + page + "_1",
              },
            ],
            isComplete: false,
          });
        };
      }
      return ({ page, size }) => {
        return Promise.resolve({
          list: [
            {
              label: "父1",
              value: "parent1",
            },
            {
              label: "父2",
              value: "parent2",
            },
          ],
          isComplete: true,
        });
      };
    },
    transformer: (node) => {
      return { title: node.label, key: node.value! };
    },
  });

  return (
    <Tree treeData={treeData} loadedKeys={loadedKeys} loadData={loadData} />
  );
};

export default RUseTreeLoad;

参数

key	类型	描述
manualInit	boolean | undefined	手动init page1
getRequest	(parentNode?: DefaultOptionType | undefined) => (params: { page: number; size: number; }) => Promise<UseTreeLoadRequestResult>	没有parentNode代表第一层
transformer	(node: DefaultOptionType) => T	树已经构建好了之后，对每个节点进行转换
loadMoreNodeRender	((status: "loading" | "complete" | "waitLoad", defaultDom: JSX.Element) => JSX.Element) | undefined