@hzab/list-render-mobile

@hzab/list-render-mobile

组件模板

• Node.js ≥ 24

安装

pnpm add @hzab/list-render-mobile

本包同时发布到公共 npm（registry.npmjs.org，public access）与企业私有源（ld / old）。 默认源可直接安装，无需额外配置；若团队要求走内网源，见消费方接入指南。

消费方需自备 peerDependencies：@hzab/data-model、antd-mobile、antd-mobile-icons、react、react-dom、react-virtualized（本包不会随包安装）。

引入方式见下方「组件」章节。

发布形态：本包在本仓以源码直出方式发布——main 指向 src，由消费方打包器编译 TypeScript 与 .less 样式；@hzab/list-render-mobile/src/* 深路径同样可直接引用。随包发布的 dist/ 仅用于 类型解析（types → dist/index.d.ts），不是运行时入口。

组件

注意事项

• new DataModel() hooks 写法时，注意避免 hooks 重复创建实例，导致 query 丢失
  • 非动态 query 参数使用 modelParams 参数直接自动生成 model。query 中的值必须是实例化的时候就存在（不支持动态 query 参数）。
  • 动态 query 参数使用 useDataModel(); 生成 model。query 允许自行配置监听的动态参数

示例

import { useDataModel } from "@hzab/data-model";
import Demo from "@hzab/list-render-mobile";

// 使用 modelParams 参数实例化 DataModel，不支持动态参数
function Test() {
  const modelParams = {
    getListApi: "/getList",
    query: { orgId: getUrlParam("orgId") },
  };

  return <Demo modelParams={modelParams} />;
}

// 使用 useDataModel 实例化 DataModel，支持动态参数
function Test2({ orgId }) {
  const model = useDataModel(
    {
      getListApi: "/getList",
      query: { orgId },
    },
    [orgId],
  );

  return <Demo model={model} />;
}

API

InfoPanel Attributes