{"id":20237379,"url":"https://github.com/react-widget/tree-basic","last_synced_at":"2025-10-06T21:40:03.996Z","repository":{"id":57347714,"uuid":"271228104","full_name":"react-widget/tree-basic","owner":"react-widget","description":"https://react-widget.github.io/tree-basic/","archived":false,"fork":false,"pushed_at":"2020-06-24T13:26:59.000Z","size":269,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T03:17:52.147Z","etag":null,"topics":["react-tree","react-widget","tree-basic"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-10T08:56:46.000Z","updated_at":"2020-06-24T13:26:15.000Z","dependencies_parsed_at":"2022-08-28T01:40:16.657Z","dependency_job_id":null,"html_url":"https://github.com/react-widget/tree-basic","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftree-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftree-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftree-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Ftree-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widget","download_url":"https://codeload.github.com/react-widget/tree-basic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241681775,"owners_count":20002376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-tree","react-widget","tree-basic"],"created_at":"2024-11-14T08:26:45.901Z","updated_at":"2025-10-06T21:39:58.963Z","avatar_url":"https://github.com/react-widget.png","language":"TypeScript","readme":"# react-widget-tree-basic\n\nTree基础组件\n\n\n## 安装\n\n```\nnpm install --save react-widget-tree-basic\n```\n\n## 使用\n\n[![Edit react-widget-tree-basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-widget-tree-basic-bsqjd?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```js\n\nimport TreeBasic from 'react-widget-tree-basic';\n\nexport default () =\u003e \u003cTreeBasic loadData={...} itemRender={...} /\u003e\n\n```\n\n### Interfaces\n\n```ts\nexport interface TreeBasicProps\u003cT = DataType\u003e {\n    /** 样式前缀 */\n    prefixCls: string;\n    /** 样式名称 */\n    className?: string;\n    /** 样式属性 */\n    style?: React.CSSProperties;\n    /** 树根节点ID */\n    rootId: string | number | null;\n    /** tree 数据结构 id 属性名称 */\n    idField: string;\n    /** tree 数据结构 leaf 属性名称 */\n    leafField: string;\n    /** tree 数据结构 parent 属性名称 */\n    pidField: string;\n    /** 最大展开层级限制没，默认：99 */\n    maxDepth: number;\n    /** 异步检测耗时机制，超过该时长即认定为异步加载，默认：16 ms */\n    asyncTestDelay: number;\n    /** 已展开的节点ID */\n    expandedIds: (string | number)[];\n    /** Tree数据加载器，必填 */\n    loadData: (data: T, node: Node\u003cT\u003e) =\u003e T[] | Promise\u003cany\u003e;\n    /** 自定义TreeNode的render返回 */\n    nodeRender?: (props: nodeRenderProps\u003cT\u003e, item: React.ReactNode, children: React.ReactNode) =\u003e React.ReactNode;\n    /** 自定义TreeItem的render返回，必填 */\n    itemRender: (props: itemRenderProps\u003cT\u003e) =\u003e React.ReactNode;\n    /** 自定义TreeNode的子节点渲染，一般动画需要使用。*/\n    childrenRender: (props: childrenRenderProps\u003cT\u003e) =\u003e React.ReactNode;\n    /** 异步加载时的加载内容返回，默认为：null */\n    loadRender?: (props: LoadRenderProps\u003cT\u003e) =\u003e React.ReactNode;\n    /** 自定义Tree容器组件*/\n    rootComponent: React.ElementType;\n}\n\nexport declare type renderProps\u003cT\u003e = Omit\u003cTreeNodeProps\u003cT\u003e, \"render\" | \"childrenRender\"\u003e;\nexport interface TreeNodeProps\u003cT = DataType\u003e {\n    node: Node\u003cT\u003e;\n    isRoot: boolean;\n    render?: (props: renderProps\u003cT\u003e, nodeItem: React.ReactNode, children: React.ReactNode) =\u003e React.ReactNode;\n}\n\nexport interface TreeNodeProps {\n\tnode: Node;\n\tisRoot: boolean;\n\trender?: (\n\t\tprops: renderProps,\n\t\tnodeItem: React.ReactNode,\n\t\tchildren: React.ReactNode\n\t) =\u003e React.ReactNode;\n}\nexport interface childrenRenderProps\u003cT = DataType\u003e {\n    getChildren: () =\u003e React.ReactNode;\n    expanded: boolean;\n    loading: boolean;\n    root: boolean;\n    node: Node\u003cT\u003e;\n    data: T;\n}\nexport interface itemRenderProps\u003cT = DataType\u003e {\n    expanded: boolean;\n    loading: boolean;\n    leaf: boolean;\n    node: Node\u003cT\u003e;\n    data: T;\n}\nexport declare function toMarked(array: any[]): any;\nexport declare type DataType = Record\u003cstring, any\u003e;\nexport declare type IdType = string | number;\nexport declare type nodeRenderProps\u003cT\u003e = renderProps\u003cT\u003e;\nexport interface LoadRenderProps\u003cT = DataType\u003e {\n    root: boolean;\n    node: Node;\n    data: T;\n}\n\n```\n\n### defaultProps\n\n```js\n{\n\tprefixCls: \"rw-tree\",\n\trootId: null,\n\tidField: \"id\",\n\tleafField: \"leaf\",\n\tpidField: \"pid\",\n\tmaxDepth: 99, \n\tasyncTestDelay: 16,\n\texpandedIds: [],\n\tchildrenRender(props) {\n\t\tif (!props.expanded) return null;\n\t\treturn props.getChildren();\n\t},\n\trootComponent: \"div\",\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Ftree-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widget%2Ftree-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Ftree-basic/lists"}